Page 43 - css揭秘

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

图 1-12 遵从“尽量减少代码重复”所描述的原则对此也是有帮助的，因为你不
如果把左右内边距增大一些（这 需要去覆盖媒体查询里同样数量的声明。这在本质上减轻了它们所产生的维
里把 padding 属性写成 .3em 护成本。
.7em），看起来就明显更加统一了
下面还有一些建议，可能会帮你避免不必要的媒体查询。

小提示 „ 使用百分比长度来取代固定长度。如果实在做不到这一点，也应该
尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），它们的值解
不妨考虑在你的媒体查询中 析为视口宽度或高度的百分比。
使用 em 单位取代像素单位。这能
让文本缩放在必要时触发布局的 „ 当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是
变化。 width，因为它可以适应较小的分辨率，而无需使用媒体查询。

„ 不要忘记为替换元素（比如 img、object、video、iframe 等）设
置一个 max-width，值为 100%。

„ 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，
background-size: cover 这个属性都可以做到。但是，我们也要时
刻牢记——带宽并不是无限的，因此在移动网页中通过 CSS 把一张
大图缩小显示往往是不太明智的。

„ 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定
列的数量。弹性盒布局（即 Flexbox）或者 display: inline-block
加上常规的文本折行行为，都可以实现这一点。
„ 在 使 用 多 列 文 本 时， 指 定 column-width（ 列 宽 ） 而 不 是 指 定
column-count（列数），这样它就可以在较小的屏幕上自动显示为单
列布局。

总的来说，我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体
查询的各个断点区间内指定相应的尺寸。当网页本身的设计足够灵活时，让
它变成响应式应该只需要用到一些简短的媒体查询代码。Basecamp 的设计
师在 2010 年写到过这种非常规情况。

“结果我们发现，想让网页在一堆不同的设备上合理展示，只需要在
最终产品上添加一点 CSS 媒体查询就可以了。这件事情之所以这么简单，
关键在于我们的布局原本就是弹性可伸缩的。因此，优化网页在小屏幕上
的表现，其实只意味着把一些外边距收拢到最小程度，然后把因为屏幕太
窄而无法显示成双列的侧栏调整为单列布局而已。”
——在 Iterations 中实践响应式设计（http://signalvnoise.com/posts/
2661-experimenting-with-responsive-design-in-iterations）

12 第 1 章 引言

඀ࠡ JOEC