基礎知識
像素相關
1、像素 ：像素是屏幕顯示最小的單位。
2、設備像素 ：設備像素又稱物理像素（physical pixel），設備能控制顯示的最小單位，我們可以把這些像素看作成顯示器上一個個的點。 iPhone5 的物理像素是 640 X 1136
3、邏輯像素（logical pixel）：獨立於設備的用於邏輯上衡量像素的單位。CSS 像素就是邏輯像素，CSS 像素是 Web 編程的概念。
4、設備獨立像素（density-independent pixel）：簡稱 dip ，單位 dp ，獨立於設備的用於邏輯上衡量像素的單位 。且邏輯像素 ≈ 設備獨立像素。
5、設置像素比（device pixel ratiodpr）：dpr = 物理像素 / 設備獨立像素。可通過 window.devicePixelRatio 獲取。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設備以多少物理像素來顯示一個 CSS 像素即：幾 dpr。普通 Android 是一倍屏，在 Retina 屏的 iPhone 上，devicePixelRatio 的值為 2，也就是說 1 個 CSS 像素相當於 2 個物理像素。通常所說的二倍屏（Retina）的 dpr 是 2， 三倍屏（IPhoneX 等）是 3 。
viewport 相關
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- visual viewport 可見視口 ：屏幕寬度window.innerWidth/Height
- layout viewport 布局視口 ：DOM寬document.documentElement.clientWidth/Height
- ideal viewport 理想視口 ：使布局視口就是可見視口
- width=device-width ：表示寬度是設備屏幕的寬度
- initial-scale ：表示初始的縮放比例
- minimum-scale ：表示最小的縮放比例
- maximum-scale ：表示最大的縮放比例
- user-scalable ：表示用戶是否可以調整縮放比例
總結現有方案優劣
現有屏幕適配方案 ：
- 設置 viewport 的 scale 值為 1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 根據屏幕的分辨率動態設置 html 的文字大小，達到等比縮放的功能
375 屏幕為 20px，以此為基礎計算出每一種寬度的字體大小
Rem.less 中設置其他基礎尺寸 @bps ：320px， 360px， 375px， 400px， 414px， 480px， 768px， 1024px
-
並計算相應的比例縮放：
.loop(@i: 1) when (@i <= length(@bps)) { //注意less數組是從1開始的
@bp: extract(@bps, @i);
@font: round(@bp/@baseWidth*@baseFont, 1);
@media only screen and (min-width: @bp){
html {
font-size: @font !important;
}
}
.loop((@i + 1));
};
-
然后在 variables.less 中設置比例和行高：
@2ptr : 1/2/20rem @ptr : 1/20rem
- 最后所有 CSS 使用 @2ptr 和 @ptr 利用 rem 縮放 dom 、字體
其他主流適配方案優劣
方案：
1. 媒體查詢 Media Queries
@media screen and (max-width: 300px){}
- 優點：
- Media Queries 可以做到設備像素比的判斷，方法簡單，成本低，特別是對移動和 PC 維護同一套代碼的時候。目前像 Bootstrap 等框架使用這種方式布局
- 圖片便於修改，只需修改 CSS 文件
- 調整屏幕寬度的時候不用刷新頁面即可響應式展示
- 缺點：
- 代碼量比較大，維護不方便
- 為了兼顧大屏幕或高清設備，會造成其他設備資源浪費，特別是加載圖片資源
- 為了兼顧移動端和PC端各自響應式的展示效果，難免會損失各自特有的交互方式
2. Flex 彈性布局
- 固定 viewport 的高度等於設備高度，寬度自適應，元素都采用 px 做單位
<meta name="viewport" content="width=device-width,initial-scale=1">
- 隨着屏幕寬度變化，頁面也會跟着變化，效果就和PC頁面的流體布局差不多，在哪個寬度需要調整的時候使用響應式布局調調就行（比如網易新聞）
- 優點：布局更加精簡，直接用 CSS 的方式，你不用再引入 Bootstrap ，使用柵格系統
- 缺點：IE10 及 IE10 以上才支持，所以目前主要應用在移動端上
3. rem + viewport
- 根據屏幕寬度設定 rem 值，需要適配的元素都使用 rem 為單位，不需要適配的元素還是使用 px 為單位
-
根據 rem 將頁面放大 dpr 倍， 然后 viewport 設置為 1 / dpr
如 iPhone6 plus 的 dpr 為 3， 則頁面整體放大 3 倍， 1px (css單位)在plus下默認為 3px (物理像素)
-
然后 viewport 設置為 1/3， 這樣頁面整體縮回原始大小，從而實現高清。這樣整個網頁在設備內顯示時的頁面寬度就會等於設備邏輯像素大小，也就是 device-width 。這個 device-width 的計算公式為：
設備的物理分辨率 / (devicePixelRatio * scale)，在 scale 為 1 的情況下，device-width = 設備的物理分辨率 / devicePixelRatio
rem弊端
iOS 與 Android 平台的適配方式背后隱藏的設計哲學是這樣的：閱讀文字時，可讀性較好的文字字號行距等絕對尺寸數值組合與文字所在媒介的絕對尺寸關系不大。（可以這樣簡單理解：A4 大小的報紙和 A3 大小甚至更大的報紙，舒適的閱讀字號絕對尺寸是一樣的，因為他們都需要拿在手里閱讀，在手機也是上同理）。在看圖片視頻時，圖片、視頻的比例應該是固定的，不應該出現拉伸變形的情況。而 rem 用在字號時，使字號在不同屏幕上的絕對尺寸不一致，違背了設計哲學。
瀏覽器兼容
- 不支持 IE 8.0 以下 、Safari 4.0 以下、FireFox 3.5以下
4. VW適配
vw 可以輕松搞定彈性布局，流體布局。vw 邏輯非常清晰其實 vw 的方案的寫法和 flexible 方案的寫法一致
～～因為 flexible 其實就是用 hack 的手段模擬了 vw 的實現而已。
具體寫法：針對 750px 的設計稿，將相應的 px 值除以 75 就是 vw 的值。
使用 vw 來實現頁面的適配，並且通過 PostCSS 的插件 postcss-px-to-viewport 把 px 轉換成 vw 。這樣的好處是，我們在擼碼的時候，不需要進行任何的計算，你只需要根據設計圖寫 px 單位。postcss-px-to-viewport 插件主要用來把 px 單位轉換為 vw 、vh 、vmin 或者 vmax 這樣的視窗單位，也是 vw 適配方案的核心插件之一。
為了更好的實現長寬比，特別是針對於 img、video 和 iframe 元素，通過 PostCSS 插件postcss-aspect-ratio-mini 來實現，在實際使用中，只需要把對應的寬和高寫進去即可。
- 優點：rem ，使用 vw 和 wh 是非常直觀的，讓其他人看到就能知道，該界面是以怎么樣的結構進行布局，利於維護
- 缺點：vw 在一些三星的機子會有兼容問題，導致失效，以及不同瀏覽器兼容問題