01

缩放、流式布局与响应式

这些术语容易造成混淆，设计师常常错误地交替互用。实际上，每个都是布局技巧的显著进化过程，像技术演进那样逐一显现。

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

 

不同分辨率下缩放布局的例子，
这种设计为了统一牺牲了易读性

流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。

 

不同分辨率下流式布局的例子，
这种设计为了易读性牺牲了统一

响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。

 

不同分辨率下响应式布局的例子

03

缩放、流式布局与响应式

内容区域通常都随窗口尺寸变化。所以当固定宽度图片超出显示区域时，图片就被裁剪了。

 

糟糕的固定宽度图片例子，它太大
了。于是出现了滚动条，内容被推
到屏幕之外

通过给图片设定相对单位，可以避免这个问题。或者使用支持响应式的框架（比如Bootstrap），使用响应式图片class名来控制（例如 class="img-responsive"）。

 

同样的元素，用响应式图片class名
的方式，滚动条就不见了