CSS 笔记 02 响应式网页设计

学习《CSS 解密》

响应式网页设计 (Responsive Web Design, RWD)

人们大多只是在不停念叨网页的“响应式”是多么重要，
而极少有人去深入探讨怎样才能做好响应式设计。

–

比较常见的实践是
用多种分辨率来测试一个网站，
然后添加越来越多的媒体查询(Media Query)规则
来修补网站在这些分辨率下出现的问题。
然而对于今后的CSS改动来说，
每个媒体查询都会增加成本。
你添加的媒体查询越多，你的CSS代码就会变得越来越
经不起折腾。
只要用对了，它就是利器。

–

媒体查询不能以一种连续的方式来修复问题。
它们的工作原理基于某几个特定的阶梯（亦称“断点”）
如果大部分演示代码并不是以弹性的方式来编写的
那么媒体查询能做的只是修补某个特定分辨率下的特定问题
这本质上只是把灰尘扫到地毯下面而已。

媒体查询的断点不应该由具体的设备来决定，
而应该根据设计自身来决定。这不仅是因为我们的网站
需要面向的设备太多了（尤其是考虑到未来的设备时），
还因为一个网站在桌面端可能会以任意尺寸的窗口来显示。
如果你有信心自己设计在任何可能出现的视口尺寸下都能
良好工作，谁关心这些设备的分辨率具体是多少呢？

避免不必要的媒体查询

尽最大努力实现弹性可伸缩的布局，
并在媒体查询的各个断点区间内指定响应的尺寸。
当网页本身的设计足够灵活时，
让它变成响应式应该只需要用到一些
简短的媒体查询代码。

优化网页在小屏幕上的表现，
其实只意味着吧一些外边距收拢到最小程度，
然后把因为屏幕太窄而无法显示成双列的侧栏
调整为单列布局而已。
http://signalvnoise.com/posts/2661-experimenting-with-responsive-design-in-iterations

• 使用百分比长度来取代固定长度。如果实在做不到这一点，
  也应该尝试使用与视口相关的单位(vw,vh,vmin,vmax)
  它们的值解析为视口宽度或高度的百分比。
• 打你需要在较大分辨率下得到固定宽度时，使用max-width
  而不是width,因为它可以适应较小的分辨率，而无需使用媒体查询。
• 不要忘记为替换元素(比如img、object、video、iframe等)
  设置一个max-width,值为100%;
• (TODO)加入背景图片需要完整地铺满一个容器，
  不管容器的尺寸如何变化，background-size: cover这个属性都可以做到。
  但是，我们也要时刻牢记–带宽并不是无限的，
  因此在移动网页中通过css把一张大图缩小显示往往是不太明智的。
• 当图片（或其他元素）以行列式进行布局时，
  让视口的宽度来决定列的数量。
  弹性盒布局（即Flexbox）或者display: inline-block
  加上常规的文本折行行为，都可以实现这一点。
• 在使用多列文本时，指定column-width(列宽)而不是指定
  column-count(列数),
  这样它就可以在较小的屏幕上自动显示为单列布局。