CSS3的Media Queries（媒体查询）在现在的网站开发中已经被应用得越来越频繁，现在但凡开发新的网站，只要不是布局超复杂的项目，不免都要“顺手”做一些响应式布局，尽量以低成本兼容更多的浏览器/设备。现代的移动设备尺寸多样，对于CSS的兼容问题也层出不穷，本文主要探讨Media Queries的分辨顺序问题。从粗略的概念视角开始，不涉及具体的技术细节。

常见的Media Queries顺序有两种，第一种是从大到小：

1
2
3
4
5

/*全局样式*/
...
@media screen and (max-width: 960px) { ... } /*兼容平板*/
@media screen and (max-width: 640px) { ... } /*兼容手机*/
@media screen and (max-width: 480px) { ... }

这种顺序就是先根据1024px+的屏幕写一个常规的网站布局，然后再逐步对小一些的屏幕做配置。先兼容平板电脑，再兼容手机。对于我这样做了很多常规网站的老人来说，这种布局顺序做起来是很舒服的。先驾轻就熟地让网站在PC上实现，我会为最大的容器定一个固定宽度，在PC平台上觉得布局已经完美了，然后再去考虑移动端的细枝末节。在移动端不想显示的东西，直接在后面的Media Queries中隐藏掉就是了。

第二种顺序是从小到大：

1
2
3
4
5

/*全局样式*/
...
@media screen and (min-width: 480px) { ... }
@media screen and (min-width: 640px) { ... } /*兼容平板*/
@media screen and (min-width: 960px)  { ... } /*台式机*/

这种顺序是先写一个偏向手机端的全局样式表，这样手机端的菜单以及一些细小的布局都要在全局样式里面先写好，然后再进行更加宽的屏幕的详细布局。这样开发对CSS的基本功要求要高一些，在写全局样式的时候，你就得不断的考虑在所有平台上是如何实现的。所有的宽度都要按百分比来考虑，容器的“伸缩性”在一开始就要布局好，而不是像传统网站那样先直接来个固定宽度。

另外，我们还要考虑到目前还有相当用户占有率的IE8/8-浏览器是不支持Media Queries的，写在Media Queries中的样式表会被IE8/8-浏览器无视掉。对于顺序一，这个问题基本不存在，被IE忽略掉的样式表部分正是在用这些老版本的IE的PC上用不到的，所以我们几乎什么都不用做。

而对于顺序二，问题变得稍微复杂一些。众所周知我们可以添加一个
css3-mediaqueries-js，在老IE中降低一些执行效率（反正效率本来就不高），让它们自己去兼容Media Queries。也可以再为老IE多写一个兼容的样式表，这样就更加麻烦一些。

于是可以肯定的说，对于开发人员来说顺序一的优势是显而易见的。然而我们真的就应该抛弃顺序二吗？
对于移动端来说，顺序二的优势还是很大的。越是小的屏幕，用顺序二的效率就越高，它不必执行整个样式表，只要执行到超出屏幕宽度以前那一级就行了，这样页面打开的速度就会快一些。想象一下如果一张大的背景图放在最后一级的Media Queries中，你能为移动端节约多少流量？我们知道速度和流量在当今的移动端还是很敏感的，而在PC上至少没有移动端那么敏感。

总结：
如果网站的用户还只集中在PC上，或者网站的受众面只定位在PC上，或者网站上几乎没有图片加载，或者你是一个没有追求的前端…那就尽管用顺序一去构架你的样式表吧。
如果要考虑全平台，那就用顺序二，为IE单独引入一个css3-mediaqueries-js。要相信在开发的时候多费一些心思，用户会给你更多的回报。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/314.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。