由于移動裝置（手機，平闆電腦等）的流行，越來越多的網站開始使用響應式設計來設計網站。其核心歸結為一句話就是，在不同裝置上自動适配不同的内容（如下圖所示）。而我們為了讓網站樣式能夠支援響應式設計，其中最關鍵的因素就是 CSS 中的 media queries，media queries 允許我們定義在不同内容和尺寸的裝置上的樣式。
最先釋出在 https://xeodou.me/2016/12/27/break-point-in-responsive-web-design/
如何使用 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 中的幾種常見機關，其中的機關對于我們做響應式設計中依然至關重要，那具體是怎麼表現的呢？
CodePen 示例連結：
http://codepen.io/xeodou/pen/xRNeqo
在這個例子中當寬度變化時，
div
标簽的背景透明度将發生改變，我們将從不同次元來看break point 的變化：
- 更改系統字型大小
- 縮放螢幕大小
- 不同浏覽器
注：我使用的浏覽器版本為 Chrome Version 55.0.2883.95 (64-bit) 和 Safari Version 10.0.2 (12602.3.12.0.1)
正常狀态
- Chrome 我們可以看到在我拖拽的過程中，随着寬度的縮小三個
【響應式】105-響應式網頁設計中的 Break Point div
html { font-size: 62.5%; }
480px = 30em = 30rem
- Safari 我們可以看到其顯示的效果和 Chrome 下卻有所不同，在寬度小于
【響應式】105-響應式網頁設計中的 Break Point 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
鍵後點選放大或者縮小頁面字型2。這時我們将字型像 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; }} - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://support.apple.com/en-us/HT207209