響應式網站 ( 二 )

• 利用 CSS 的媒體查詢 ( media query ) 能夠讓網站針對不同尺寸的觀看裝置作出回應。
• IE8 及更早之前的瀏覽器不支援媒體查詢。
• 視埠寬度 ( viewport width ) 最常被利用作為判斷不同裝置的基準。
  範例：

body { backgrond-color: red; }

@media only screen and (min-width: 48em) {
   body { backgrond-color: blue; }
}
// 當視埠寬度大於等於48em(768px)，背景顏色切換成藍色
//screen代表任何具有螢幕的東西，and用來做邏輯運算

• 常運用媒體查詢 ( media query )來調整：

1. 排版：根據視埠改變字體尺寸，調整每行字數。
2. 導覽列：小螢幕上隱藏導覽列到下拉選單圖示。
3. 直欄數量：小螢幕顯示單欄，隨螢幕越寬逐漸增加可見直欄數量。
4. 圖像：依螢幕大小展示不同尺寸圖像。

• 媒體查詢可用來詢問媒體特徵，以下列舉幾個比較重要的：

1. width：視埠寬度 (最重要！受到大多數瀏覽器支援的媒體特徵)
2. height：視埠高度
3. device-width：裝置螢幕寬度
4. device-height：裝置螢幕高度
5. orientation：橫向或直向 ( 寬大於高 or 高大於寬 )
6. aspect-ratio：視埠寬高比
7. device-aspect-ratio：裝置寬高比
   ( 常見桌上螢幕 => 16:9 ，iphone 4 => 3:2 ，iphone 5 => 16:9 )
8. resolution：裝置螢幕解析度

• 中斷點 ( breakpoint ) 是響應式設計裡的重要概念，它是你改變設計範圍的點，即媒體查詢中的數值點。 (例如上面範例就是利用 48em 作為中斷點來區隔設計範圍)
• 確認常見裝置的寬度能在你的設計範圍當中正常展示，利用各種裝置測試你的設計，若有必要請調整中斷點。( 中斷點能夠微調，因為其數值是基於每行的字元數，不需要是完全準確的 )
• 漸進增強 (progressive enhancement) 表示從基礎的最低共用點開始設計起 (代表能滿足最多使用者的狀態) ，再針對不同瀏覽器及裝置做加強。
• 通常建議先針對最小的螢幕做設計，這樣能迫使你思考網站內容重要性的高低順序，讓最小的螢幕中呈現最重要的東西。
• 文字在每行 45 ~ 75 字元時是最容易閱讀的。