照应式网站设计中经常出现的3个疑问 (照应式网站设备有哪些)

疑问1.菜单分行

假设你在网页的上方经常使用了导航栏，当这个页面在小屏幕的设施上出现时，照应式设计理论会将这个导航菜单紧缩到更紧凑的格局，以在小屏幕中成功良好的出现。

但这并不总是有效的，假设显示区域比断点要宽(断点，深刻来讲就是换行处)，又无余够在一行中将一切的菜单逐个出现出来，这时就会出现菜单分行的状况(见下图，白色栏即为分行的菜单栏)。

导航菜单在页面的上方，访客访问网站时很容易就会留意到这一点，菜单分行会给用户留下比拟差的第一印象。

那么怎样能力防止菜单分行状况的出现呢?

处置这个疑问有好几种方法，第一种方法就是增加导航菜单上水平展现的菜单栏的数量。

当菜单栏选项较多时，咱们可以对它们启动相应的整合，分红类别和子类别。

子类别可以在用户选用类别的时刻经过下拉菜单的方式显示，这样横排的菜单栏就会增加了。

第二种方法就是将断点设为更低的值。

断点的实践值应该是导航菜单或许不可浮现的宽度，而不是某个特定设施的尺寸。

疑问2.经常使用固定宽度的图片

网站的内容区域普通随视窗的大小而扭转，所以当一个固定宽度的图片比内容区域要宽的时刻，图片就会被剪裁，只在屏幕上显示一局部。

上方的是经常使用固定宽度图片典型的一个栗子，页面图片和内容在电脑上显示的很好，然而由于手机尺寸相对电脑而言较小，可显示的内容区域也有所增加，这时局部图片不能一下子显示出来，只能借助图片滚动条。

原本用户选用手机阅读网站就是奔着极速、方便去的，如今却要滑动滚动条检查全图，这种阅读体验对用户来说真实是太蹩脚了，一点都没有施展照应式规划的好处。

这个疑问要怎样处置呢?咱们可以给图片设置关系单位，或许经常使用允许照应式的框架(比如Bootstrap)，用照应式图片class名来控制(例如class=img-responsive)。

雷同的元素在经常使用照应式图片class名控制后，图片可以在手机上很好的展现，图片的滚动条也隐没了(见下图)。

疑问3.元素失真

这个疑问或许听下来愈加形象，然而当照应式网站在小屏幕设施如手机上出现时，它又真实的出现着。

打个比如来说，未经处置过的列变成了行，这就是一种方式的元素失真，这样听下来是不是会更有概念一些?元素失真并不是一个方便的疑问，由于它经常会影响网站的这个规划结构。

比如在下图中，在电脑中3个图片或文本是并列的，但在手机上显示时第3个图片或文本就独自成一行了，这影响了网站内容的全体结构。

关于处置元素失真这个疑问其实很方便：明白的设置网站各个元素的高、宽和内边距，然而异常的是很多人还在纠结怎样处置这个疑问。

另外，假设某个元素不在它应在的位置，笼罩住了其余元素，咱们可以经常使用div(方便来说div就是一个块状的物品，有人称它为盒子，咱们可以将网站中的各个元素分类放出来，便于网站规划治理)，设置外边距，让它回到原本的位置。