一說到響應式設計，肯定離不開媒體查詢media。一般認為媒體查詢是CSS3的新增內容，實際上CSS2已經存在了，CSS3新增了媒體屬性和使用場景(IE8-瀏覽器不支援)。本文將詳細介紹媒體查詢的內容。
（推薦教學：CSS教學）
#媒介類型
在CSS2中，媒體查詢只使用於
media屬性用於為不同的媒介類型規定不同的樣式
screen 計算機螢幕（預設值）
tty 電傳打字機以及使用等寬字元網格的類似媒介
tv 電視類型設備（低等尺寸、有限的螢幕翻滾解析度裝置（小螢幕、有限的頻寬）
print 列印預覽模式/列印頁面
braille 盲人使用點字法回饋裝置
aural # 適合所有裝置使用點字法回饋裝置##aural
##真正廣泛使用且所有瀏覽器都相容的媒介類型是'screen'和'all'
<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}
</style>
<div class="box"></div>登入後複製
媒體屬性
媒體屬性是CSS3新增的內容，多數媒體屬性帶有「min-」和「max-」前綴，用於表達「小於等於」和「大於等於」。這避免了使用與HTML和XML衝突的“<”和“>”字元。 [注意]媒體屬性必須用括號()包起來，否則無效。 下表中列出了所有的媒體屬性：
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
#aspect-
#aspect- ratio | min-aspect-ratio | max-aspect-ratiodevice-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratiocolor | min-##color | min- color | max-colorcolor-index | min-color-index | max-color-indexmonochrome | min-monochrome | max-monochrome#resolution | min -resolution | max-resolutionscan | grid#【1】顏色（color）
#指定輸出裝置每個像素單元的比特值。如果裝置不支援輸出顏色，則該值為0
向所有能顯示顏色的裝置套用樣式表
<style>
@media (color){
.box{height: 100px;width: 100px;background-color: lightblue;}
}
</style>
<div class="box"></div>登入後複製
【2】顏色索引（color-index）
顏色索引指定了輸出設備中顏色查詢表中的條目數量，如果沒有使用顏色查詢表，則值等於0
向所有使用至少256個索引顏色的設備應用樣式表(下列程式碼無顯示，說明傳回值為0)
<style>
@media (min-color-index: 256){
.box{height: 100px; width: 100px;background-color: lightgreen;}
}
</style>
<div class="box"></div>登入後複製
【3】寬高比（aspect-ratio）
寬高比描述了輸出設備目標顯示區域的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。
向可視區域是正方形或是寬螢幕的裝置應用程式樣式表
<style>
@media (min-aspect-ratio: 1/1) {
.box{height: 100px;width: 100px; background-color: lightgreen; }
}
</style>
<div class="box"></div>登入後複製
#【4】裝置寬高比（device-aspect-ratio）
#設備寬高比描述了輸出設備的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。
向寬高比為16:9的特殊寬螢幕裝置套用樣式表
<style>
@media (device-aspect-ratio:16/9) {
.box{ height: 100px;width: 100px; background-color: pink;}
}
</style>
<div class="box"></div>登入後複製
【5】裝置高度（device-height）
裝置高度描述了輸出裝置的高度
向顯示在最小高度1000px的螢幕上的文件套用樣式表
<style>
@media (min-device-height: 1000px) {
.box{ height: 100px;width: 100px; background-color: pink;}
}
</style>
<div class="box"></div>登入後複製
【6】裝置寬度（device-width）
裝置寬度描述了輸出裝置的寬度
向顯示在最小寬度1000px的螢幕上的文件套用樣式表
<style>
@media (min-device-width: 1000px) {
.box{ height: 100px; width: 100px;background-color: lightblue; }
}
</style>
<div class="box"></div>登入後複製
【7】網格（grid）
網格判斷輸出裝置是網格裝置還是點陣圖裝置。如果設備是基於網格的（例如電傳打字機終端或只能顯示一種字形的電話），則值為1，否則為0。
向非網格裝置套用樣式表
<style>
@media (grid:0) {
.box{height: 100px;width: 100px; background-color: lightgreen;}
}
</style>
<div class="box"></div>登入後複製
【8】高度（height）
高度描述了輸出裝置渲染區域（如可視區域的高度或印表機紙匣的高度）的高度
向高度大於800px的可視區域的裝置應用樣式表
<style>
@media (min-height:800px) {
.box{ height: 100px; width: 100px;background-color: lightgreen; }
}
</style>
<div class="box"></div>登入後複製
【9】寬度（width）
寬度描述了輸出裝置渲染區域的寬度
向寬度大於800px的視覺區域的裝置應用樣式表
<style>
@media (min-width:800px) {
.box{ height: 100px;width: 100px; background-color: lightgreen;}
}
</style>
<div class="box"></div>登入後複製
【10】黑白（monochrome）
黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0
向非黑白设备应用样式表
<style>
@media (monochrome:0) {
.box{height: 100px; width: 100px; background-color: lightgreen;}
}
</style>
<div class="box"></div>登入後複製
【11】方向（orientation）
方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式
值：landscape(横屏) | portrait(竖屏)
向竖屏设备应用样式表
<style>
@media (orientation: portrait) {
.box{height: 100px;width: 100px;background-color: lightgreen; }
}
</style>
<div class="box"></div>登入後複製
【12】分辨率（resolution）
分辨率指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示
[注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此
向每英寸至少90点的设备应用样式
<style>
@media (min-resolution: 90dpi) {
.box{height: 100px;width: 100px; background-color: lightgreen; }
}
</style>
<div class="box"></div>登入後複製
【13】扫描（scan）
扫描描述了电视输出设备的扫描过程
值： progressive | interlace
语法
媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假。
当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。
<link rel="stylesheet" href="style.css" media="print">
<div class="box"></div>
登入後複製
media并不是'print'，所以媒体查询为假。但是，style.css文件依然被下载
逻辑操作符：
操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询
and
and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真
[注意]在不使用not或only操作符的情况下，媒体类型是可选的，默认为all
满足横屏以及最小宽度为700px的条件应用样式表
@media all and (min-width: 700px) and (orientation: landscape) { ... }登入後複製
由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为
@media (min-width: 700px) and (orientation: landscape) { ... }登入後複製
or
将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符
满足最小宽度为700像素或是横屏的手持设备应用样式表
@media (min-width: 700px), handheld and (orientation: landscape) { ... }登入後複製
not
not操作符用来对一条媒体查询的结果进行取反
[注意]not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询
@media not all and (monochrome) { ... }
//等价于
@media not (all and (monochrome)) { ... }登入後複製
only
only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用
media="only screen and (max-width:1000px)"{...}登入後複製
上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式
media="screen and (max-width:1000px)"{...}登入後複製
上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式
所以，在使用媒体查询时，only最好不要忽略
方法
window.matchMedia()方法用来检查CSS的mediaQuery语句
[注意]IE9-浏览器不支持，可以使用第三方函数库matchMedia.js
属性
window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有media和matches两个属性。
media：返回所查询的mediaQuery语句字符串
matches：返回一个布尔值，表示当前环境是否匹配查询语句
var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true
登入後複製
可以根据matchMedia()方法的matches属性的不同结果，进行对应的设置
var result = window.matchMedia('(min-width: 600px)');
if (result.matches) {
//
}else{
//
}登入後複製
[注意]如果window.matchMedia无法解析mediaQuery参数，matches属性返回的总是false，而不是报错
var result = window.matchMedia('123');
console.log(result.matches);//false
登入後複製
事件
window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法
// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);
登入後複製
注意，只有mediaQuery查询结果发生变化时，才调用指定的回调函数
所以，如果想要mediaQuery查询未变化时，就显示相应效果，需要提前调用一次函数
下面这个例子是当页面宽度小于1000px时，页面背景颜色为品红色；否则为淡蓝色
var mql = window.matchMedia("(min-width: 1000px)");
mqCallback(mql);
mql.addListener(mqCallback);
function mqCallback(mql) {
if (mql.matches) {
document.body.background = 'pink';
}else{
document.body.background = 'lightblue';
}
}登入後複製
打印样式
媒体查询的一个常用功能是打印样式的设置，主要是背景清除、字体颜色变黑等
@media print{
*,*:before,*:after{
background:transparent!important;
color:#000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,a:visited{
text-decoration: underline;
}
a[href]:after{
content:"(" attr(href) ")";
}
abbr[title]:after{
content:"(" attr(title) ")";
}
a[href^="#"]:after,a[href^="javascript:;"]:after{
content:"";
}
pre,blockquote{
border: 1px solid #999;
/*只有opera浏览器起作用，避免在元素内部插入分页符*/
page-break-inside:avoid;
}
thead{
display:table-header-group;
}
tr,img{
page-break-inside:avoid;
}
img{
max-width:100%!important;
}
p,h2,h3{
/*元素内部发生分页时，最少保留3行*/
orphans:3;
/*元素内部发生分页时，元素顶部最少保留3行*/
windows:3;
}
h2,h3{
/*避免在元素后面插入一个分页符*/
page-break-after:avoid;
}
}登入後複製
相对单位
如果媒体查询@media使用的是相对单位，如rem，这里有一个坑需要着重强调一下。
一般而言，rem是相对于HTML的字体大小的。但是，由于媒体查询的级别非常高，它并不是HTML的子元素，不是相对于HTML，而是相对于浏览器的，而浏览器的默认字体大小是16px。
如果HTML设置字体大小为12px，设置如下媒体查询：
media="only screen and (max-width:1rem)"
登入後複製
实际上，max-width等于16px，而不是12px
而正是由于媒体查询是相对于浏览器的， 所以使用rem就没有必要，完全可以使用em来替代
media="only screen and (max-width:1em)"
登入後複製
更多编程相关知识，请访问：编程入门！！
以上是詳解CSS中的Media媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！
