响应式布局 响应式设计怎样让图片自适应

响应式布局 响应式设计怎样让图片自适应

时间:2019-1-10 分享到:

响应式规划方法对开发者非常有用,由于它使咱们的内容在各种设备上广为传达。不必保留几个独立版别的网站,也能够摒除比如缩放和流式布局这些方法的弊端。

缩放、流式布局与响应式

这些术语简单形成混淆,规划师常常错误地替换互用。实践上,每个都是布局技巧的明显进化进程,像技能演进那样逐一闪现。

缩放布局,旨在相对缩放每一个元素。它们会跟着窗口巨细变化动态缩放内容,就这方面而言,它们是响应式的。布局本身保持静止,经过改动每一个元从来保持一致的表现。

流式布局就不相同,由于它们跟着窗口尺度缩放容器元素。经过em这类相对单位能够做到这点,克服了缩小文字的问题。用户主动缩放时,规划就被破坏了。

响应式规划不会缩放任何东西。相反,它会根据窗口尺度决定显现哪些内容。

灾害1:菜单折行

假如在页面顶部运用了导航栏,当页面展现在小屏幕上时,响应式规划通常会把它“掰”成更紧凑的格式,但这并非总是有效,假如显现区域比断点更宽,又不足以在一行显现一切菜单项的话。成果会导致菜单的折行。

有以下方法能够解决这个问题:

其一,减少导航栏中横排菜单项的数量,将它们分门别类。然后选中某类时,你能够经过下拉菜单来显现子类。

其二,减少断点的数值。应该以导航栏开始出问题的实践数值为准,而非具体设备尺度。

其三,不同设备运用不同方式,例如滑动抽屉。

灾害2:元素的扭曲

这有点晦涩难明,但本质上,布局显现在小窗口上的时候,一切未经处理的列都会以行的形式呈现。这是个问题,由于内容的扭曲会不经意地改动规划的层级。

解决方法清楚明了,但令人惊奇的是,仍有很多人在纠结它,只要明确地设定元素的宽度、高度、内边距。假如它移出所在位置,盖住了其他元素,能够经过将它包裹在div容器中,设置外边距,迫使它回到本来的地方。

版权所有:http://www.foxizhanzhang.com 转载请注明出处