[轉貼] CSS3 Media Queries 詳細介紹與使用方法，Responsive Web Design 必備技術

上一篇我們介紹了 Responsive Web Design 之後，這次要來詳細介紹 CSS3 Media Queries 了。在上一篇中，我們提到 Responsive Web Design 的實作方式有大半都是利用 CSS3 Media Queries 來達成。而顧名思義 Media Queries 就是要在支援 CSS3 的瀏覽器中才能正常工作，IE8 以下不支援。而 Media Queries 的套用方法千變萬化，要套用在什麼樣的裝置中，都可以自己來定義。 ## 關於 Media Queries
到底什麼是 Media Queries ？一般我們在開發 HTML + CSS 網頁中，都會有一份 CSS 來控制網頁的樣式表。而隨著各式各樣不同大小、長寬與解析度的裝置的興起，我們在開發網頁只考慮到自己的螢幕顯示的如何，是多麼的膚淺哪。So，在開發者 的螢幕看到的網頁或許很漂亮，那，其他人的螢幕呢？所以，我們需要的是能夠控制不同大小的螢幕（裝置），在其上所顯示出來的樣式，讓各式各樣來自不同地方 的 User 都能夠有最佳的瀏覽體驗。

• 出生年代：CSS3
• 支援狀況：除 IE8 以下不支援 外，其餘較新款瀏覽器接皆支援（詳細支援狀況：http://caniuse.com/css-mediaqueries）

較佳的開發步驟：

1. 先寫一份在你的螢幕顯示 OK 的 CSS 樣式。
2. 開始使用 Media Queries 在不同裝置上做調整。

你可以先看例子

在國外有一個網站專門蒐集各式各樣的 Media Queries 效果，網站名稱就叫做「Media Queries」，網址：http://mediaqueri.es/。進到該網站之後，你會看到每一列都有 4 張網站的截圖，從左開始是螢幕寬度較小的行動裝置，一直到右邊則是在傳統 PC 的較大螢幕上。而在傳統 PC 中，會將許多元素並排；在手機中，會變成只有一行。

Media Queries 怎麼寫

Media Queries 其實說簡單也很簡單，你可以只使用下面的幾行 CSS，再針對不同裝置去設 CSS 屬性就好了。這個段落將由淺入深，從最簡單、最 Easy、最沒挑戰性的使用寬度來玩。

Media Queries 有兩種使用方法

• 在同一個 CSS 檔案中，用 Media Queries @media 來判斷使用者之螢幕寬度，選擇載入哪一段 CSS。
• 在 HTML 的 載入的地方，用 media 屬性判斷使用者之裝置 / 視窗寬度，選擇載入哪一個 CSS 檔案。

以上兩種則一即可，使用第一種的話要寫好幾遍 標籤，另一種要在同一個 CSS 檔案中寫好幾遍 @media。效果相同，選擇自己喜歡的方式即可。（網路上的 Framework 都是第1種，如 Bootstrap。）

@media 用寬度 ( width ) 判斷

下面的語法，是最常用到的 Media Queries：（下方為同一檔案之內容）

//全部的使用者都會載入這裡的 CSS。

@media screen and (min-width: 1200px) {
    // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。    
}

@media screen and (max-width: 767px) {
    // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。    
}

@media screen and (max-device-width: 480px) {
    // 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。 
}

在 Media Queries 中，我們最常使用 min-width 和 max-width 來判斷使用者的視窗寬度，而 max-device-width 則是使用者「裝置」的最大寬度。width 和 device-width 差在哪裡？

• width : 因為瀏覽器可以自由調整寬度，所以這邊指的是該瀏覽視窗的寬度。
• device-width : 就算你把瀏覽器視窗弄到符合最大(小)寬度，還是不會生效。因為，device-width 指的是使用者的「裝置」最大寬度，而不是瀏覽器視窗。所以，device-width 常用在判斷手機上。

所以，你也可以自己加上其他的條件下去。要注意的是，每一個條件之間請用 and 來分隔，並要適時加上括號以免錯誤。 min-width 是最小寬度；max-width 是最大寬度，可以用來表示一定的範圍。

寫在 HTML 裡頭的判斷

上一節的語法，你也可以把它個別拆成好幾個檔案，然後用 HTML 的 來載入並且判斷。下面為 HTML 代碼：

<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)">
<link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)">

我們就可以用 link 中的 media 屬性來判斷使用者的視窗 / 裝置寬度，如上。之後，在每一個 css 檔案中你就可以寫若使用者寬度符合條件的 CSS 。如 a.css 中，就是要寫如果使用者之視窗寬度 <= 768px，要再載入的 CSS。

注意事項

在 Media Queries 中的 CSS，其效果是覆蓋原本預設的 CSS。所以，你要先有一份完整的 CSS，再使用 Medai Queries，對細部元素做調整。所以，絕對不是把全部的 CSS 複製一遍到 Media Queries 中再修改喔！

Viewport

如果網頁沒有做 Responsive Web Design 的話，手機的瀏覽器會自動假裝解析度變很大，會讓網頁完整顯示。但是，這就讓字變得很小，使用者還要去做放大而不能直接閱讀。而這個 meta 標籤是為了防止這樣的情形發生 ( iphone 據說會有此情形)，讓網頁顯示的寬度就直接是裝置的寬度，不會把網頁硬塞。這段只要加在 HTML 的 裡頭即可。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

針對某裝置下去做設定、快速使用 : Media Query Snippets

Media Query Snippets 這個網站蒐集了很多行動裝置的 @media 條件式，你可以直接複製來使用。如下圖，有一堆的裝置你可以拿去設定：（網址：http://nmsdvid.com/snippets/）

另外，其實你不太需要去對每個裝置都去做調整，基本上使用行動裝置的 max-device-width: 480px ，就綽綽有餘了。上面的網站，是幫你做個整理，以便不時之需。



轉貼自:http://fundesigner.net/css3-media-queries/