媒体查询@media技巧

---

@media 查询条件判断的顺序

---

如果判断最小值，即使用(min-width)，应该从小到大写；也是推荐的写法，因为一些前端框架（如：bootstrap）就是判断最小值，从小往大写的；

• 向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内；
• 向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖；

代码：

<style>
    body {
        background-color: #f00;
    }
    
    @media screen and (min-width: 768px) {
        body {
            background-color: #0f0;
        }
    }
    
    @media screen and (min-width:992px) {
        body {
            background-color: #00f;
        }
    }
    
    @media screen and (min-width:1200px) {
        body {
            background-color: #0ff;
        }
    }
</style>

如果判断最大值，即使用(max-width)，应该小大到小写；

<style>
    body {
        background-color: #f00;
    }
    
    @media screen and (max-width:1200px) {
        body {
            background-color: #0ff;
        }
    }
    
    @media screen and (max-width:992px) {
        body {
            background-color: #00f;
        }
    }
    
    @media screen and (max-width: 768px) {
        body {
            background-color: #0f0;
        }
    }
</style>

---

@media 媒体查询判断条件，引入不同的css文件

---

比如：当屏幕宽度在 992PX与1200PX 之间时，引入 newMedia.css 样式表；

代码：

<link rel="stylesheet" media = "screen and (min-width:992px) and (max-width:1200px)" href = "newMedia.css">

---

@media 媒体查询中的 min-width 和 min-device-width 的区别

---

min-width: 在PC端和移动端都能正常响应，效果一致；它是指当前可视区域的宽度；

<style>
    body {
        background-color: #f00;
    }
    
    @media screen and (min-width: 768px) {
        body {
            background-color: #0f0;
        }
    }
    
    @media screen and (min-width:992px) {
        body {
            background-color: #00f;
        }
    }
</style>

效果如图，开不开启手机模拟，效果都一样：

image.png

min-device-width: 在移动端和期望值一样。 device:设备；它是指当前设备的宽度。当拖出改变浏览器大小的时候，当前终端设备的宽度并不会变化，意味着媒体查询条件不会响应；

代码：

<style>
    body {
        background-color: #f00;
    }
    
    @media screen and (min-device-width: 768px) {
        body {
            background-color: #0f0;
        }
    }
    
    @media screen and (min-device-width:992px) {
        body {
            background-color: #00f;
        }
    }
</style>

如果使用 min-device-width ， 那么在不开启手机模拟时，就没有效果了。

image.png