響應式網頁設計 | 如何讓你的網頁完美適配各種螢幕
由於移動裝置（手機，平板電腦等）的流行，越來越多的網站開始使用響應式設計來設計網站。其核心歸結為一句話就是，在不同裝置上自動適配不同的內容（
如下圖所示
）。而我們為了讓網站樣式能夠支援響應式設計，其中最關鍵的因素就是 CSS 中的 media queries，media queries 允許我們定義在不同內容和尺寸的裝置上的樣式。
如何使用 Media Queries
上面我們說到 media queries 可以幫助我們定義不同尺寸裝置上的內容顯示，那麼我們只需要在我們現有的樣式中增加針對特定內容在特定裝置或者尺寸的樣式即可，例如：
div。container {
width： 100%；
}
@media screen only and （min-width： 480px） {
div。container {
width： 40%；
}
}
上面的例子中，我們的定義了只在螢幕（screen only）寬度最小值大於 480px 的時候將寬度從 100% 變成 40%，而這個480px就是我們通常所說的 Break Point 。其中關於更多的 media queries 的屬性可以去參考下 Mozilla 的文件。不過這個時候大家可能會有所疑問，這裡的 480px 真的會預期一樣麼？
Break Point 介紹
首先我們要知道，上面的例子中 media queries 針對的是內容的寬度，而通常一個父級元素的寬度是由它包含的子類元素確定的，當然我們也可以制定一個絕對值。當元素的寬度超過螢幕的寬度時我們的內容就會出現水平可滾動的效果，類似下面這種效果：
同樣高度也會出現類似的情況，但是一般從網頁互動和使用者體驗的角度來考慮，我們不會對特定的高度做限定，因為網頁的內容是自上而下滾動的，高度可以自由延展。這是可能會想那我定義個 max-width：280px 不就好了嘛。是的，這確實解決了我們的問題，但是隨之而來的問題是如果使用者改變了他的瀏覽器的預設字型大小怎麼辦？在我的上一篇部落格中「font-size 的常用長度單位」我介紹了 CSS 中的幾種常見單位，其中的單位對於我們做響應式設計中依然至關重要，那具體是怎麼表現的呢？
（完整版請戳：
http：//
codepen。io/xeodou/pen/x
RNeqo
）
在這個例子中當寬度變化時，div 標籤的背景透明度將發生改變，我們將從不同維度來看break point 的變化：
更改系統字型大小
縮放螢幕大小
不同瀏覽器
注：我使用的瀏覽器版本為 Chrome Version 55。0。2883。95 （64-bit） 和 Safari Version 10。0。2 （12602。3。12。0。1）
正常狀態
Chrome
我們可以看到在我拖拽的過程中，隨著寬度的縮小三個div標籤的背景顏色同時變化，那是因為在不改變系統字型大小並且指定html { font-size： 62。5%； }的時候，在 Chrome 下480px = 30em = 30rem。
Safari
我們可以看到其顯示的效果和 Chrome 下卻有所不同，在寬度小於480px=30em時紅色塊和綠色塊顏色透明度減小，而當寬度小於300px=30rem時藍色塊才開始變化。
更改字型大小
Chrome
Chrome 下可以透過設定>高階設定>網頁內容 更改字型大小，我們將字型大小從Medium更改到Large，這時 Chrome 的頁面內容正常情況下1rem=20px，而當載入html { font-size：62。5%； }後字型大小變成1rem=12。5px。
我們可以看到其中字型明顯變大了，這時候紅色色塊依然在寬度小於480px的時候顏色變化，而綠色和藍色色塊都同時在30rem=30em=600px時候顏色發生變化。
Safari
Safari 下透過點開檢視（View）選單後按住Option鍵後點擊放大或者縮小頁面字型。這時我們將字型像 Chrome 下一樣增加字型大小後1rem=19。2px，而當載入html { font-size：62。5%； }後字型大小變成1rem=12px。
文字大小和 Chrome 下一樣都明顯被放大了，而這時候紅色色塊也一樣在寬度小於480px的時候改變了顏色，而綠色色塊在寬度小於30em=12*1。6*30px=576px時候改變了顏色，藍色塊在寬度小於30rem=12*30px的時候顏色發生變化。
定義 Break Point
從上面的這幾個例子我們可以看到，就算在同一個裝置不同的瀏覽器下不同的單位也會有不同的表現，雖然px在不同的瀏覽器甚至是不同的裝置中的表現都是一樣的，但是當用戶希望改變頁面的展示形式（字型大小）或者在一個不同的裝置上時，他所希望的就是他瀏覽的網頁隨著這種改變而改變，所以我們不應該選取px這種非響應式的單位，而且不同瀏覽器下rem的定義不一致導致我們很難對最終的寬度很有個預測，因此建議選取em做為單位。如果我們在使用 SASS這種預編譯 CSS 時，我們可以使用類似 sass-mq 這種工具庫去方便使用各種 media queries，如：
$mq-breakpoints： （
mobile： 20em，
tablet： 46。24em，
desktop： 61。25em，
wide： 81。25em
）；
@import ‘mq’；
。foo {
@include mq（$from： mobile， $until： tablet） {
background： red；
}
@include mq（$from： tablet） {
background： green；
}
}
參考連結：
Using media queries↩
Change the font size or zoom level of web pages in Safari↩
本文最先發布在 響應式設計中的 Break Point，作者為 @xeodou
