媒体查询笔记、 @media

语法：

@media not|only mediatype and (expressions) {
    CSS 代码; 
}
           

• not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
• only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
• all: 所有设备，这个应该经常看到。

语法：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" target="_blank" rel="external nofollow"  />
           

• screen：这个不用说大家都知道，指的是一种媒体类型；
• and：被称为关键词；
• （max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

最小宽度：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
           

安卓设备：

/* 240px的宽度 */
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" target="_blank" rel="external nofollow"  type="text/css" />
/* 360px的宽度 */
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" target="_blank" rel="external nofollow"  type="text/css" />
/* 480px的宽度 */
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" target="_blank" rel="external nofollow"  type="text/css" />
           

• not 关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
• only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

感谢作者：https://www.cnblogs.com/moqiutao/p/4753839.html