积极响应式结构设计方式对开发人员十分管用，即使它使他们的文本在各式各样电子设备上甚广散播。不必留存两个分立版的中文网站，也能除却譬如翻转和INS13ZD产业布局那些方式的弊病。
那些名词难导致混为一谈，结构雕塑家经常错误地交错连动。事实上，每一都是产业布局基本功的明显变异操作过程，像控制技术重构那般逐个显现出来。
翻转产业布局，意在相较翻转每两个原素。它会随著询问处大小不一变动静态翻转文本，就这点来说，它是积极响应式的。产业布局这类维持恒定，透过发生改变每两个原素来完全一致的整体表现。
上图：相同解析度下翻转产业布局的范例，此种结构设计为的是标准化牺牲生命了语言选择。
INS13ZD产业布局就不那样，即使它随著询问处体积翻转罐子原素。透过em这类相较基层单位能努力做到这两点，消除了增大文本的问题。使用者积极主动翻转时，结构设计就被毁坏了。
上图：相同解析度下INS13ZD产业布局的范例，此种结构设计为的是语言选择牺牲生命了标准化。
积极响应式结构设计不能翻转任何人小东西。恰好相反，它会依照询问处体积下定决心表明什么样文本。
上图：相同解析度下积极响应式产业布局的例子。
灾祸1：菜单折行如果在页面顶部使用了导航栏，当页面展现在小屏幕上时，积极响应式结构设计通常会把它“掰”成更紧凑的格式，但这并非总是有效，如果表明区域比断点更宽，又不足以在一行表明所有菜单项的话。结果会导致菜单的折行。
有些方式能解决这个难题。其一，减少导航栏中横排菜单项的数量，将它分门别类。然后选中某类时，你能透过下拉菜单来表明子类。
其二，减少断点的数值。应该以导航栏开始出难题的实际数值为准，而非具体电子设备体积。
其三，相同电子设备使用相同方式，例如滑动抽屉。
灾祸2：使用固定宽度图片文本区域通常都随询问处体积变动。所以当固定宽度图片超出表明区域时，图片就被裁剪了。
上图：糟糕的固定宽度图片范例，它太大了。于是出现了滚动条，文本被推到屏幕之外。
透过给图片设定相较基层单位，能避免这个难题。或者使用支持积极响应式的框架（比如Bootstrap），使用积极响应式图片class名来控制（例如 class=”img-responsive”）。
上图：同样的原素，用积极响应式图片class名的方式，滚动条就不见了。
灾祸3：原素的扭曲这有点晦涩难懂，但本质上，产业布局表明在小询问处上的时候，所有未经处理的列都会以行的形式呈现。这是个问题，即使文本的扭曲会不经意地发生改变结构设计的层级。
上图：列变成了行，扭曲了文本。
解决方式显而易见，但令人惊奇的是，仍有很多人在纠结它：只要明确地设定原素的宽度、高度、内边距。如果它移出所处位置，盖住了其他元素，能透过将它包裹在div罐子中，设置外边距，迫使它回到原本的地方。
规划有助于避免难题本文只讨论了3种最普遍遇到的积极响应式结构设计灾祸，还有很多其他途径会毁了两个好的结构设计。预防严重错误并不难。现代浏览器都有内置的积极响应式产业布局测试，好好规划结构设计，多做测试。
原文地址：http://www.webdesignerdepot.com/2015/04/3-responsive-design-disasters-and-how-to-avoid-them/
译文地址：http://colachan.com/post/3436
