媒体查询如何使用？
一、背景介绍
在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的媒体查询（Media Queries） 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。
二、知识刨析
媒体查询 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，媒体查询 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。
首先来看一个简单的实例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media语句表示的是：当页面宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：
1、screen：这个不用说大家都知道，指的是一种媒体类型；
2、and：被称为关键词，与其相似的还有not,only；
3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
媒体类型(Media Type)在css中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打印预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
only关键字用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
三、编码实战
CSS3 Media写法，我们先来看下下面这段代码，估计很多人在响应式的网站CSS很经常看到类似下面的这段代码：
@media screen and (max-width: 768px){
body{
background: #000;
}
}
这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于768px的时候执行它下面的CSS。
然后就是当浏览器尺寸大于768px时候的代码了：
@media screen and (min-width:768px){
body{
background: #000;
}
}
我们还可以混合使用上面的用法：
@media screen and (min-width:768px) and (max-width:960px){
body{
background:yellow;
}
}
上面的这段代码的意思是当页面宽度大于768px小于960px的时候执行下面的CSS。
四、扩展思考
max(min)-device-width和max(min)-width的区别；
在网页自适应设计中，max-device-width和max-width是不可缺少的两大CSS属性，如果你对此两个属性有了充分的认识之后，你或许把网页的自适应设计得更为极致一些。
max-device-width和max-width是有区别的，表现在如下几个方面：
1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2、max-width是目标显示区域的宽度，例如，浏览器宽度。
3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。
4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。
5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
五、参考文献
鸣谢！
感谢大家的阅读！
网友评论