聊聊3种最常见的响应式设计问题33.pdf

聊聊3种最常见的响应式设计问题 原⽂出处：http://www .uisdc .com/3-responsive-design-disasters @⼗萬個為什麽 ：本⽂重点讨论设计师遇到最多的3个响应式设计问题， 会提供⼀ 些规避错误的策略 响应式设计⽅法对开发者⾮常有⽤，因为它使我们的内容在各种设备上⼴为传播。不 ⽤保留⼏个独⽴版本的⽹站， 可以摒除诸如缩放和流式布局这些⽅法的弊端。 缩放、流式布局与响应式 这些术语容易造成混淆，设计师常常错误地交替互⽤。实际上，每个都是布局技巧的 显著进化过程，像技术演进那样逐⼀显现。 缩放布局，旨在相对缩放每⼀个元素。它们会随着窗⼜⼤⼩变化动态缩放内容，就这 ⽅⾯⽽⾔，它们是响应式的。布局本⾝保持静⽌，通过改变每⼀个元素来保持⼀致的 表现。 上图：不同分辨率下缩放布局的例⼦，这种设计为了统⼀牺牲了易读性。 流式布局就不⼀样，因为它们随着窗⼜尺⼨缩放容器元素。通过em这类相对单位可以 做到这点，克服了缩⼩⽂字的问题。⽤户主动缩放时，设计就被破坏了。 上图：不同分辨率下流式布局的例⼦，这种设计为了易读性牺牲了统⼀。 响应式设计不会缩放任何东西。相反，它会根据窗⼜尺⼨决定显⽰哪些内容。 上图：不同分辨率下响应式布局的例⼦。 灾祸1：菜单折⾏ 如果在页⾯顶部使⽤了导航栏，当页⾯展现在⼩屏幕上时，响应式设计通常会把 它“掰”成更紧凑的格式，但这并⾮总是有效，如果显⽰区域⽐断点更宽，又不⾜以在 ⼀⾏显⽰所有菜单项的话。结果会导致菜单的折⾏。 有些⽅法可以解决这个问题。其⼀，减少导航栏中横排菜单项的数量，将它们分门别 类。然后选中某类时，你可以通过下拉菜单来显⽰⼦类。 其⼆，减少断点的数值。应该以导航栏开始出问题的实际数值为准，⽽⾮具体设备尺 ⼨。 其三，不同设备使⽤不同⽅式，例如滑动抽屉。 灾祸2：使⽤固定 度图⽚ 内容区域通常都随窗⼜尺⼨变化。所以当固定宽度图⽚超出显⽰区域时，图⽚就被裁 剪了。 上图：糟糕的固定宽度图⽚例⼦，它太⼤了。于是出现了滚动条，内容被推到屏幕之 外。 通过给图⽚设定相对单位，可以避免这个问题。或者使⽤⽀持响应式的框架 （⽐如 Bootstrap ），使⽤响应式图⽚class名来控制 （例如 class=”img-responsive” ）。 上图：同样的元素，⽤响应式图⽚class名的⽅式，滚动条就不见了。 灾祸3：元素的扭曲 这有点晦涩难懂，但本质上，布局显⽰在⼩窗⼜上的时候，所有未经处理的列都会以 ⾏的形式呈现。这是个问题，因为内容的扭曲会不经意地改变设计的层级。 上图：列变成了⾏，扭曲了内容。 解决⽅法显⽽易见，但令⼈惊奇的是，仍有很多⼈在纠结它：只要明确地设定元素的 宽度、⾼度、内边距。如果它移出所处位置，盖住了其他元素，可以通过将它包裹在 div容器中，设置外边距，迫使它回到原本的地⽅。 规划有助于避免问题 本⽂只讨论了3种最普遍遇到的响应式设计灾祸，还有很多其他途径会毁了⼀个好的 设计。预防错误并不难。现代浏览器都有内置的响应式布局测试，好好规划设计，多 做测试。 原⽂地址：webdesignerdepot 译⽂地址： colachan W3Cschool （）最⼤的技术知识分享与学习平台 此篇内容来⾃于⽹站⽤户上传并发布。