媒體查詢筆記、 @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