媒體類型和響應式設計
- 2019 年 10 月 4 日
- 筆記
一、媒體類型：
常用的三種為：all，print和screen
二、媒體類型引用方法：link標籤，xml方式，@import和css3新增的@media四種
- link方法：
link方法引入媒體類型其實就是在<link>標籤引用樣式的時候，通過link標籤中的media屬性來指定不同的媒體類型。例如：
<link rel="stylesheet" type="text/css" href="css.css" media="screen">
2.xml方式： xml方式引用媒體類型和link引入媒體類型極為相似，也是通過media屬性來指定的。
<?xml-stylesheet rel="stylesheet" media="screen" href="css.css"?>
3.@import方式：
@import是用來引用樣式文件方法之一，同樣也可以用來引用媒體類型。@import引入媒體類型主要有兩種方式：
注意：@import必須置於<style>標籤或者css文件首行，否則該語句將會被忽略
1.在樣式中(即在css文件中)@import調用另一個樣式文件，例如：
@import url('css.css') screen and (max-width: 500px);
2.在<style></style>標籤中引入(在IE6和IE7中不被支援)，例如：
<style> @import url('css.css') screen and (max-width: 1000px); </style>
4.media方式
@media是CSS3中新引進的一個特性，稱為媒體查詢。在頁面中也可以通過這個屬性來引 入媒體類型。@media引入媒體類型和@import有點類似，也具有兩種方式：
1.在樣式中引入媒體類型
@media screen { /*選擇器{*/ /*樣式程式碼*/ /*}*/ }
2.使用@media引入媒體類型的方式也是在<style>中引用
<style> @media screen { /*選擇器{*/ /*樣式程式碼*/ /*}*/ } </style>
說完引入媒體類型的四種方式，下面該說說他們的區別了。
@import和link的區別
1.從屬關係區別 @import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不僅可以載入 CSS 文件，還可以定義 RSS、rel 連接屬性等。
2.載入順序區別 載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 將在頁面載入完畢後被載入。
3.兼容性區別 @import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在兼容性問題。
4.DOM可控性區別 可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文檔的，無法使用@import的方式插入樣式。
5.權重區別(該項有爭議，詳解請看此文章https://www.cnblogs.com/my–sunshine/p/6872224.html) link引入的樣式權重大於@import引入的樣式。
結論：強烈建議使用link標籤，慎用@import方式。 這樣可以避免考慮@import的語法規則和注意事項，避免產生資源文件下載順序混亂和http請求過多的煩惱。
三、媒體特性（Media Query）
前面有簡單的提到，Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)，常用的特性w3c共列出來13種。具體的可以參閱：Media features。為了更能理解Media Query，我們在次回到前面的實例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
轉換成css中的寫法為：
@media screen and (max-width: 600px) { 選擇器 { 屬性：屬性值； } }
其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){…}的大括弧之中。在語句上面的語句結構中，可以看出Media query和css的屬性集合很相似，主要區別在：
1、Media query只接受單個的邏輯表達式作為其值，或者沒有值；
2、css屬性用於聲明如何表現頁頁的資訊；而Media Query是一個用於判斷輸出設備是否滿足某種條件的表達式；
3、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關係，表示應用於大於等於或者小於等於某個值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式返回的只有真或假兩種
常用的Media Query如下表所示：
兼容的瀏覽器：
下面我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width
@media (max-width:600px){ .body{ display:none } }
上面表示的是：當螢幕小於或等於600px時，將執行內部css渲染W樣式eb頁面。
二、最小寬度Min Width
@media (min-width:900px){ .body{ display:none } }
上面表示的是：當螢幕大於或等於900px時，將執行內部css渲染W樣式eb頁面。
三、多個Media Queries使用
@media screen and (min-width: 600px) and (max-width:900px){ .body{ display:none } }
Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當螢幕在600px-900px之間時採用內部樣式來渲染web頁面。
四、設備螢幕的輸出寬度Device Width
@media screen and (max-device-width:480px) { .body{ display:none } }
上面的程式碼指的是內部樣式適用於最大設備寬度為480px，比如說iPhone上的顯示，這裡的max-device-width所指的是設備的實際解析度，也就是指可視面積解析度
五、iPhone4
@media only screen and (-webkit-min-device-pixel-ratio: 2) { .body{ display:none } }
上面的樣式是專門針對iPhone4的移動設備寫的。
六、not關鍵字
@media not print and (max-width: 1200px) { .body{ display:none } }
not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用於排除符合表達式的設備，特別注意：
not否定的是後面全部的表達式，個人認為可以這麼理解，把print和max-width: 1200px看成是兩個條件1和條件2，所以上述not表達式可以看成!(條件2 and 條件2)，如果該表達式返回的是true，則執行內部css語句，反之則不執行，其他判斷也可以以此類推。
七、only關鍵字
@media only screen and (max-device-width: 240px) { .body{ display:none } }
only(只有支援screen和max-device-width兩個條件才會顯示)用來定某種特定的媒體類型，可以用來排除不支援媒體查詢的瀏覽器。其實only很多時候是用來對那些不支援Media Query但卻支援Media Type的設備隱藏樣式表的。其主要有：支援媒體特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對於不支援媒體特性(Media Queries)但又支援媒體類型(Media Type)的設備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支援Media Qqueries的瀏覽器，不論是否支援only，樣式都不會被採用。
八、其他
在Media Query中如果沒有明確指定Media Type，那麼其默認為all，如：
@media (min-width: 200px) and (max-width: 1000px) { img{ display:none } }
另外還有使用逗號（，）被用來表示並列或者表示或，如下
@media handheld and (max-width: 480px),screen and (max-width: 1000px) { img{ display:none } }
上面程式碼中style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於螢幕寬度大於或等於960px的設備上。
