媒体查询

CSS媒体查询、针对不同的设备类型定义不同的样式。

一、在样式表链接中使用媒体查询

<link rel="stylesheet" href="styles/mainstyles.css">
//此样式表表示.应用于所有设备，

<link rel="stylesheet" href="styles/widerscreen.css"
media="only and (min-width:40em)">
//此样式表表示.(视口宽度大于等于40em）时应用的设备。

二、媒体查询结构

.container {
    width: 1400px;
    margin: 0 auto;
}
@media screen and (max-width: 1448px) {
    .container {
        width: 1200px;
    }
}

2.1 @media

以@media开头来表示这是一条媒体查询语句。

2.2 screen

紧跟在@media后面的是一个或者多个表达式，可以判别为真或假。在创建媒体查询时，必须以媒体类型（此处为screen）作为第一个表达式：@media only screen。与媒体类型相对应的有：print（打印机）、braille（盲文）或者all（全部）等其他类型。

2.3 and

and是一个关键字，表示有多个表达式，screen是第一个表达式，and后为另一个表达式。需前后表达式都为真时，整条查询结果才为真（也就是“且”的意思）。与and相对应的关键字有：or、not等。

2.4 (max-width: 1448px)

and之后的(max-width: 1448px)为第二个表达式（表达式在小括号内），所有的表达式都应包含在括号内，除非它是只有一个单词的媒体类型表达式（如：screen、print等）。
前缀min-表示“至少”，即“大于等于”的意思。
前缀max-表示“至多”，即“小于等于”的意思。

2.5 ｛｝

花括号里面的内容表示整条媒体查询结果为真时的CSS 样式。

在使用媒体查询时，不要把所有样式都放入媒体查询中。正确做法是先声明适用于所有视口宽度的非媒体查询样式，然后只是用媒体查询去覆盖掉在特定宽度中用到的样式。

---

作者：味蕾里的青春
链接：http://www.jianshu.com/p/2dfa5bab1ef1
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。