减少媒体查询的技巧-1

在设计和制作自适应网页的时候，我们经常会用到媒体查询这一功能，可是过多的使用这个功能会增加我们的代码量，增加了我们的维护成本，下面我们来一起看一下这几个技巧，或许可以帮助你减少媒体查询的使用。

1.使用百分比长度来取代固定长度。如果实在做不到这一点，也应该尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），它们的值解析为视口宽度或高度的百分比。

2.当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。

3.给替换元素（比如 img、object、video、iframe 等）设置一个 max-width，值为 100%。

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

5.当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定列的数量。弹性盒布局（即 Flexbox）或者 display: inline-block加上常规的文本折行行为，都可以实现这一点。

6.在使用多列文本时，指定column-width（列宽）而不是指定column-count（列数），这样它就可以在较小的屏幕上自动显示为单列布局。

以上是这几个技巧需要多实践去摸索，才能融会贯通，使之如臂，希望对大家有点帮助。