移動端設備種類繁多，需要適配多種情況的響應式佈局來保證美觀的頁面實現，先來解釋容易弄混的多個名詞。
PPI
單位英寸像素數
DPR
設備像素比： 設備像素 / CSS像素(某一方向上)
DPI
Dpi（每平方英寸像素數目）：圖像細節程度的度量
建議看一下知識小科普！像素英寸與DPI的那些事兒
單位：
- emem是相對長度單位。相對於當前對象內文本的font-size(即父元素尺寸)。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
- rem
“font size of the root element (根元素的字體大小)”— W3C官網
也就是說1rem就等於
<html>的字體大小，因爲網頁<html>的默認字體大小是 16px，所以 1rem=16px 。我在實習的公司前輩教我，用1rem=100px替換設計稿上的內容，不需要複雜的計算轉換就可以將px轉換爲rem，從而達到適配的效果。
!function(){
function a(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.2+"px"
}
var b=null;
window.addEventListener("resize",function(){
clearTimeout(b),b=setTimeout(a,10)},!1),a()
}(window); 我們的設計稿寬爲720，我們將瀏覽器可見區域/7.2得到100px的大小，將他賦值給根元素fontSize，他的值也就是1rem的大小。
詳細的各種寬高可以看一下
- rpx
微信小程序CSS單位，可以根據屏幕寬度進行自適應
rpx實際上就是系統級的rem（把頁面按比例分割750份,我們就不用手動設置JS改變根元素font-size啦）
1rpx=window.innerWidth/750
- vm 、vh、vmin、vmax
vw：視窗寬度的百分比
vh：視窗高度的百分比
vmin：當前較小的vw和vh
vmax：當前較大的vw和vh