-
基礎概念
屏幕尺寸
屏幕對角線的長度（cm）
屏幕像素密度
屏幕密度是指一個設備表面上存在的像素數量，它通常以每英寸有多少像素來計算(PPI)。
屏幕分辨率
橫縱向上物理像素的個數（物理像素）
物理像素（physical pixel）或設備像素（device pixel）
物理像素又被稱為設備像素，它是顯示設備中一個最微小的物理部件。每個像素可以根據操作系統設置自己的顏色和亮度透明度，通過控制每個像素點的顏色，使屏幕顯示出不同的圖像，屏幕從工廠出來那天起，它上面的物理像素點就固定不變了，單位pt。
設備獨立像素（density-independent pixel）
設備獨立像素也稱為密度無關像素，可以認為是計算機坐標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)，然后由相關系統轉換為物理像素。
css像素或者邏輯像素或者設備無關像素（device-independent pixel）
CSS像素又稱為邏輯像素或者與設備無關的像素(device-independent pixel)，簡稱DIPs，是web開發者使用的最小單位，也就是我們經常寫的width=多少px中的px
設備像素比（device pixel ratio）
設備像素比 ＝ 物理像素 / 設備獨立像素
在Javascript中，可以通過 window.devicePixelRatio 獲取到當前設備的dpr。
在css中，可以通過 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備，做一些樣式適配。
或者使用 resolution | min-resolution | max-resolution 這些比較新的標准方式
上圖中， Retina為高清設備屏幕，它的一個css像素對應 了4個物理像素
位圖像素
一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數據單元。每一個位圖像素都包含着一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。
理論上，1個位圖像素對應於1個物理像素，圖片才能得到完美清晰的展示
如上圖：對於dpr=2的retina屏幕而言，1個位圖像素對應於4個物理像素，由於單個位圖像素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(注意上述的幾個顏色值)。
所以，對於圖片高清問題，比較好的方案就是兩倍圖片(@2x)。
如：200×300(css pixel)img標簽，就需要提供400×600的圖片。
縮放比 scale
縮放比：scale = 1/dpr
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
整個網頁在設備內顯示時的頁面寬度就會等於設備邏輯像素大小，也就是device-width。這個device-width的計算公式為：設備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設備的物理分辨率/devicePixelRatio 。這就是initial-scale的意義
視窗 viewport
簡單的理解，viewport是嚴格等於瀏覽器的窗口。在桌面瀏覽器中，viewport就是瀏覽器窗口的寬度高度。但在移動端設備上就有點復雜。
移動端的viewport太窄，為了能更好為CSS布局服務，所以提供了兩個viewport:虛擬的visualviewport和布局的layoutviewport。
viewport的內容比較深，推薦閱讀PPK寫的文章，以及中文翻譯
視窗縮放 viewport scale
在開發移動端頁面，我們可以設置meta標簽的viewport scale來對視窗的大小進行縮放定義
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
rem單位
font size of the root element.
rem就是相對於根元素<html>的font-size來做計算
視窗單位
- vw : 1vw 等於視窗寬度的1%
- vh : 1vh 等於視窗高度的1%
- vmin : 選取 vw 和 vh 中最小的那個
- vmax : 選取 vw 和 vh 中最大的那個
兼容性：在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持
可以去 Can I use 或 css3test 查看兼容情況
關於設計稿為什么要使用二倍圖、三倍圖
理論上一個位圖像素對應一個物理像素，圖片才能完美顯示！設計稿是按px單位設計的，為了應對高分辨率顯示屏（設備像素比 dpi = 2或者3等）的高像素密度==>同等px大小擁有dpi倍的物理像素點，我們將設計稿增大 dpi倍，一般是2被或者3倍，這樣設計稿縮放到屏幕時的分辨率就和屏幕本身的分辨率一致了（實際中設計稿總像素數要大於或者等於屏幕分辨率就可以），圖片就可以完美顯示了，
移動端app設計以什么尺寸作為視覺稿作為適配（以淘寶為什么用iphone 6作為設計稿參考基准屏幕為例）
https://zhidao.baidu.com/question/1695418267113361468.html
假如公司設計稿不是基於750的怎么辦，其實很簡單，按上圖做一些相應替換即可，但是流程和方法還是一樣的。解釋一下為什么要在@3x的圖里切，這是因為現在市面上也有不少像魅藍note這種超高清屏幕，devicePixelRatio已經達到3了，這個切圖保證在所有設備都清晰顯示。
rem布局原理
rem布局的本質是什么？我覺得rem的本質就是“等比縮放”，要是元素會隨着頁面尺寸的變化，寬度和高度等比縮放，不就可以在維持原有布局的基礎上最好的適配各種屏幕尺寸了嗎。
假設我們將屏幕寬度平均分成100份，每一份的寬度用x表示，x = 屏幕寬度 / 100，如果將x作為單位，x前面的數值就代表屏幕寬度的百分比，元素大小就會隨頁面尺寸同步縮放！
如果想要頁面元素隨着屏幕寬度等比變化，我們需要上面的x單位，不幸的是css中並沒有這樣的單位，幸運的是在css中有rem，通過rem這個橋梁，可以實現神奇的x
，如果子元素設置rem單位的屬性，通過更改html元素的字體大小，就可以讓子元素實際大小發生變化。如果讓html元素字體的大小，恆等於屏幕寬度的1/100，那1rem和1x就等價了(實際上我們只要讓rem與屏幕尺寸掛鈎就好了，不一定將其設為屏幕尺寸的1/100)
如何設置html根元素的尺寸
設備屏幕尺寸/設計稿尺寸 = 頁面元素實際尺寸/元素設計稿尺寸（等比縮放） =====>頁面元素實際尺寸=元素設計稿尺寸*（設備屏幕尺寸/設計稿尺寸 ）
上面標紅的系數就是我們想要的rem單位的值，也就是html根元素的字體大小！ ====>font-size = 設備屏幕尺寸/設計稿尺寸 px。考慮到一般瀏覽器的最小字體是12px，如果設備屏幕尺寸是320px,設計稿寬度是640px,則html的字體大小就是320/640 = 0.5px，這個字體大小在瀏覽器的無法正常顯示，所以一般*100，這樣html的字體大小就變成50px，就解決了字體大小小於12px的問題(其實感覺這個系數是10也可以，雖然計算出來的html字體大小是5px小於12px，但是實際中在頁面中並沒有使用這個尺寸的文字，因為每個元素都有自己設置相應的字體大小，不會繼承html的字體，所以好像也不用擔心系數10太小的問題)；
此外也方便了計算，設計稿尺寸轉rem尺寸時只要在原來的數值上除以100就可以了，如果除以非10的整數不好計算。
最終 html字體大小 font-size = 1rem = (設備屏幕尺寸/設計稿尺寸)*系數（例如100）
可以通過js來設置，一般需要在頁面dom ready、resize和屏幕旋轉中設置
1、font-size = (document.documentElement.clientWidth /designWidth)*系數
2、設計稿尺寸轉rem尺寸時只要在原來的數值上除以就可以了
參看：https://link.jianshu.com/?t=http://link.zhihu.com/?target=http%3A//www.cnblogs.com/lyzg/p/4877277.html