誰有一顆玲瓏剔透的心，他就會知道何時心碎。

圖片來源網絡

foreword

? ? ? 這篇總結了我個人所知道的一些關于移動端適配的知識。希望對讀者有所幫助。

start

（1） appetizers（開胃知識點）

因為這一節(jié)基礎知識以及概念性內容多，有一定前端基礎的可以略過這一節(jié)。(該知識點文字來源于網絡資料)

①屏幕尺寸、屏幕分辨率、屏幕像素密度

屏幕尺寸：指屏幕的對角線的長度，單位是英寸，1英寸=2.54厘米，常見的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。所以6.0的手機 6*2.54 = 15.24 厘米。

屏幕分辨率：指在橫縱向上的像素點數，單位是px，1px=1個像素點。一般縱向像素 * 橫向像素來表示一個手機的分辨率，如1960*1080。（這里的1像素指的是物理設備的1個像素點）。比如（iphone6 750 * 1337） （iphone6plus 1960 * 1080）

屏幕像素密度/像素密度/屏幕密度：：屏幕上每英寸可以顯示的像素點的數量，單位是ppi，即“pixels per inch”的縮寫。屏幕像素密度與屏幕分辨率有關。

②物理像素，CSS像素

設備像素/物理像素：（分辨率）買手機的時候有一個n x m的分辨率，那是屏幕的n x m個呈像的點，一個點（小方格）為一個物理像素。它是屏幕能顯示的最小粒度。設備像素也被稱為物理像素，他是顯示設備中一個最微小的物理部件。每個像素可以根據操作系統設置自己的顏色和亮度。任何設備的物理像素的數量都是固定的。

CSS像素：CSS像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量（確定）Web頁面上的內容。它是為web開發(fā)者創(chuàng)造的，在CSS或者JavaScript中使用的一個抽象的層。一般情況下，CSS像素被稱為與設備無關的像素（device-independent像素），簡稱為“DIPs”。在一個標準的顯示密度下（普通屏），一個CSS像素對應著一個設備像素。

CSS像素與物理像素的關系：一個width為200px的元素，它占據了200個CSS像素，但200個CSS像素占據多少個物理像素取決于屏幕的特性（是否是高密度，即像素比）和用戶的縮放行為。在蘋果的視網膜屏幕中，視網膜的像素密度是普通屏幕的兩倍，這個元素就跨越了400個設備像素，如果用戶放大，它將跨越更多的設備像素。當然現在好多手機的像素比變得越來越大，比如我之前用的魅族手機和現在用的iphone 8 plus都已經達到了3，所以這個元素正常情況下就跨越了600個設備像素。

設備獨立像素：設備獨立像素（也叫密度無關像素），可以認為是計算機坐標系中的一個點，這個點代表一個可以由程序使用的虛擬像素（比如：CSS像素），然后由相關系統轉換為物理像素。

位圖像素：一個位圖像素是柵格圖像（如：png，jpg，gif等）最小的數據單元，至少1個位圖像素對應1個物理像素，圖片才能得到完美清晰的展示。

對于Web開發(fā)者而言：我們使用的每一個CSS和JavaScript定義的像素本質上代表的都是CSS像素，我們在開發(fā)過程中并不在意一個CSS像素到底跨越了多少個設備像素。我們將這個依賴于屏幕特性和用戶縮放程度的復雜計算交給了瀏覽器。

③像素比
像素比：它的官方的定義為：設備物理像素和設備獨立像素的比例，也就是devicePixelRatio = 物理像素/獨立像素（window.devicePixelRatio）

console.log(window.devicePixelRatio)

iphone5

iphone6 plus

④視口

布局視口：在PC端上，布局視口等于瀏覽器窗口的寬度。

console.log(document.documentElement.clientWidth);//布局視口

視覺視口：視覺視口是用戶正在看到的區(qū)域。用戶可以縮放來操作視覺視口，而不影響視覺視口的寬度。視覺視口決定了用戶看到了什么。在JavaScript上獲取視覺視口的寬度可以通過`window.innerWidth得到。

console.log(innerWidth);//視覺視口，設置滾動條包括滾動條

以及可以用js求得。

console.log(outerWidth);//包括瀏覽器的鑲邊區(qū)域
console.log(screen.width);//屏幕寬度

圖片來源網絡

（2）實戰(zhàn)引入一（以rem為基礎單位）

rem: ‘The font size of the root element’ 就是以根元素的字體大小為單位。rem適配的原理就是以html的font-size大小為單位來布局。

• 2.1 使用@media查詢設置rem：

//代碼
html{
    max-width: 640px;
    margin: 0px auto;
    font-size: 100px;
}

@media only screen and (max-width: 414px){
 html{
        font-size: 64px;
    }
}
@media only screen and (max-width: 375px){
    html{
        font-size: 58px;
    }
}
@media only screen and (max-width: 360px){
    html{
        font-size: 56px;
    }
}
@media only screen and (max-width: 320px){
    html{
        font-size: 50px;
    }
}
//不要忘記在head標簽中添加如下視口設置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

???設計師給我們的設計圖紙一般寬度為640，750,375.這里以640 為基準。整個屏幕的寬度設置為

640/100 = 6.4rem 414/64 ≈ 6.4rem 375/58 ≈ 6.4rem 360/56 ≈ 6.4rem 320/50 ≈ 6.4rem

這里只是列舉了幾個常用的@media查詢，當具體如果應用面更廣大，需要更多的查詢，方法也是迥異。
通過這個適配，我們可以在寫CSS的時候使用rem作為單位，1rem = 100px。這種方法也是一種比較常用的方法。

缺點:這種方法需要計算量，需要通過給出的范圍內，計算出相應的font-size，以及找出每個范圍內最合適的font-size會比較麻煩。也存在一定的誤差。

• 2.2 使用js獲取innerWidth 或者 clientWidht 設置font-size

//代碼
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

//或者

 document.documentElement.style.fontSize = window.innerWidth/6.4 + 'px';

//通過以上設置 就相當于把整個屏幕的寬度設置為 6.4rem ，而根據設計圖是640px的，就可以相當于
//100px = 1rem ，在布局的時候就可以用rem為單位布局,(設計圖是其他大小就改為多少)

//可以添加代碼
document.body.style.fontSize = '14px'; // 在body上將字體還原大小，避免頁面無樣式字體超大

//不要忘記在head標簽中添加如下視口設置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

? ? ?當然如果你在電腦上訪問移動端網頁的時候。也就是document.documentElement.clientWidth>640的時候，如果你還想更好的訪問。

//可以添加代碼
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640){
 deviceWidth = 640;document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
}

• 2.3 1px邊框特殊處理

? ? ? 這里的1px是指的是1物理像素，當有特殊需求的時候，比如說邊框需要1物理像素的。meta標簽中的initial-scale屬性設置縮小效果，設置好meta標簽后，我們可以動態(tài)修改它。

//代碼 

//不要忘記在head標簽中添加meta標簽
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    let dpr = window.devicePixelRatio;  //求出像素比
    let scale = 1/dpr;   //求出縮放比例
    let width = document.documentElement.clientWidth/6.4 * dpr;  //乘以像素比，rem可以正常使用
    let metaN = document.querySelector('meta[name="viewport"]');
    metaN.setAttribute('content','content','initial-scale=' + scale + ', maximum-scale=' + scale + ', 
minimum-scale=' + scale + ', user-scalable=no');  //設置縮放

    let styleN = document.createElement('style');
    styleN.innerHTML = 'html{ font-size:' +  width + 'px; }';  //設置rem
    document.head.appendChild(styleN);

• 2.4 頁面中字體使用font-size

? ? ? 這里淘寶和網易頁面中字體font-size都不使用rem，而是使用@media查詢,這個僅供參考，因為使用rem也是可以的。

//代碼
@media screen and (max-width:321px){.test{font-size:15px} }
@media screen and (min-width:321px) and (max-width:400px){ .test{font-size:16px}}
@media screen and (min-width:400px){.test{font-size:18px} }

圖片來源網絡

（3）實戰(zhàn)引入二（以vw wh為基礎單位）

vw vh 可以輕松搞定彈性布局，
1vw = 1/100th viewport width
1vh = 1/100th viewport heght
用viewport width的百分比來設置element width

其中vmin相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin。
其中vmax相對于視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax。
通過vmin 和 vmax 可以做 移動端手機旋轉的樣式。

缺點/優(yōu)點：vw vh vmin vmax 對移動端手機兼容性并不是很強，要求Android 4.4 以上的版本，雖然現在不是特別普及，但是現在Android 4.4 版本的使用用戶已經鳳毛麟角了，所以使用 vw 為適配單位很有可能成為熱門。

在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內核中也得到完美的全面支持。

以vw作為布局單位，方法如下。（使用sass函數編譯 ）

//640px作為設計稿基準
$vm_base: 640; 
@function vm($px) {
    @return ($px / 640) * 100vw;
}

//通過代碼，假如設計稿中元素的寬度是 40px ，那么就可以在樣式中寫
.test{
    width:vm(40)
}

圖片來源網絡

如果對你有幫助，請動動小手點個贊吧。

<完結-待補充>