css揭秘--避免不必要的媒体查询

　　遵从“尽量减少代码重复”所描述的原则对此也是有帮助的，因为你不 需要去覆盖媒体查询里同样数量的声明。这在本质上减轻了它们所产生的维 护成本。 　　下面还有一些建议，可能会帮你避免不必要的媒体查询。 　　„ 使用百分比长度来取代固定长度。如果实在做不到这一点，也应该 尝试使用与视口相关的单位（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（列数），这样它就可以在较小的屏幕上自动显示为单 列布局。 　　总的来说，我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体 查询的各个断点区间内指定相应的尺寸。当网页本身的设计足够灵活时，让 它变成响应式应该只需要用到一些简短的媒体查询代码。

标签：不必要,媒体,column,布局,查询,width,视口,揭秘,css
来源： https://www.cnblogs.com/aisiqi-love/p/13156343.html