遵从“尽量减少代码重复”所描述的原则对此也是有帮助的，因为你不
需要去覆盖媒体查询里同样数量的声明。这在本质上减轻了它们所产生的维
护成本。
下面还有一些建议，可能会帮你避免不必要的媒体查询。
使用百分比长度来取代固定长度。如果实在做不到这一点，也应该
尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），它们的值解
析为视口宽度或高度的百分比。
当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是
width，因为它可以适应较小的分辨率，而无需使用媒体查询。
不要忘记为替换元素（比如 img、object、video、iframe 等）设
置一个 max-width，值为 100%。
假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，
background-size: cover 这个属性都可以做到。但是，我们也要时
刻牢记——带宽并不是无限的，因此在移动网页中通过 CSS 把一张
大图缩小显示往往是不太明智的。
当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定
列的数量。弹性盒布局（即 Flexbox）或者 display: inline-block
加上常规的文本折行行为，都可以实现这一点。
在 使 用 多 列 文 本 时， 指 定 column-width（ 列 宽 ） 而 不 是 指 定
column-count（列数），这样它就可以在较小的屏幕上自动显示为单
列布局。
总的来说，我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体
查询的各个断点区间内指定相应的尺寸。当网页本身的设计足够灵活时，让
它变成响应式应该只需要用到一些简短的媒体查询代码。