眾所周知，前端的移動端適配問題是個老生常談的問題，面試中也是經(jīng)常被問到，面試官經(jīng)常是一句“你是怎么做移動端適配的”或者“談?wù)勀銓σ苿佣诉m配的理解”就讓面試者感覺不知道該從什么地方下手去回答這個問題。手機市場日漸豐富的同時，給我們前端開發(fā)人員帶來的網(wǎng)頁內(nèi)容自適應(yīng)屏幕尺寸進(jìn)行顯示的問題也日漸凸顯出來。

本文將針對移動端適配問題進(jìn)行總結(jié)，總結(jié)一下各主流適配方案以及在主流框架中是怎么做適配的，希望通過本文能讓讀者在遇到移動端適配的面試問題時不再不知所措。

相關(guān)概念

要搞明白移動端適配問題，就要先搞明白屏幕、像素和視口三個概念。

一、屏幕

1 屏幕大小

屏幕大小指屏幕的對角線的長度，單位一般是英寸。常見的手機屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。

常見手機屏幕查看網(wǎng)址： http://screensiz.es/ 。

注意:

英寸的英文為 inch , 英尺的英文是 foot

1foot = 12inch

1inch = 2.54cm

02 屏幕分辨率

屏幕分辨率是指屏幕橫縱向上的像素點數(shù)。一般表示形式 x * y 或者 y * x 表示。例如 IPhone 6 的屏幕分辨率為 750 * 1334，華為 P30 的分辨率為 2340 * 1080。

展開全文

注意:

屏幕分辨率是一個固定值，生產(chǎn)出來就固定了，無論手機屏幕還是電腦屏幕。

屏幕分辨率與顯示分辨率不同。計算機可以修改顯示分辨率，信號傳遞給屏幕，在屏幕上顯示。

1080P 的分辨率是1920x1080 720P 1280 * 720。

2K 屏幕是單一方向分辨率具有約 2000 像素的顯示設(shè)備。最標(biāo)準(zhǔn)的 2K 分辨率為 2048×1024。

幾款手機的屏幕分辨率：

二、像素

01 物理像素

設(shè)備像素 / 物理像素是一個長度單位。1 物理像素對應(yīng)顯示設(shè)備中一個微小的物理部件。

設(shè)備像素是手機屏幕的一個參數(shù)，由手機制造商決定。例如 IPhone 6 的物理像素為 750 * 1334。

02 設(shè)備獨立像素

設(shè)備獨立像素，簡稱 DIP（device-independent pixel）,又稱為設(shè)備無關(guān)像素，是一個長度計量單位。

設(shè)備獨立像素也是手機屏幕的一個參數(shù)，由手機制造商決定。例如IPhone 6 的設(shè)備獨立像素為 375 * 667。

1 個設(shè)備獨立像素可以認(rèn)為是計算機坐標(biāo)系統(tǒng)中的一個點，代表可以通過程序控制使用的虛擬像素。

普通屏幕下 1 設(shè)備獨立像素 等于 1 物理像素。

高清屏幕下 1 設(shè)備獨立像素 等于 N 物理像素。

設(shè)備獨立像素的出現(xiàn)，使得即使在高分辨率的屏幕下，也可以正常尺寸的顯示元素，代碼不受到設(shè)備的影響。

比如 Retina 屏幕：

Retina 是蘋果公司 2010 年推出的一種顯示標(biāo)準(zhǔn)，是把更多的像素點壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度。

幾款手機的屏幕像素參數(shù)，更多請查看 https://uiiiuiii.com/screen/。

03 CSS 像素

CSS 像素又稱為虛擬像素，是一個相對單位，單位為 px。

CSS 像素不能直接跟現(xiàn)實中的長度單位換算。

CSS 像素主要用在 CSS 與 JS 中控制元素的大小與位置。

04 位圖像素

位圖圖像亦稱為點陣圖像或柵格圖像，是由單個的像素點組成的。放大后會失真。(png jpeg jpg gif)

矢量圖，也稱為面向?qū)ο蟮膱D像或繪圖圖像，在數(shù)學(xué)上定義為一系列由線連接的點。放大后不會失真。軟件有Adobe Illustrator，Sketch (svg)。

位圖像素也是一個長度單位。位圖像素是柵格圖像（如：png，jpg，gif等）最小的數(shù)據(jù)單元。

1個位圖像素對應(yīng)于1個物理像素，圖片才能得到完美清晰的展示（馬賽克）。

05 像素之間的關(guān)系

頁面不縮放的情況下，CSS 像素 == 獨立設(shè)備像素 == 邏輯像素 == DIP == 位圖像素。

在一個標(biāo)準(zhǔn)的顯示密度下(普通屏)，一個 CSS 像素對應(yīng)著一個設(shè)備像素，高清屏幕下一個 CSS 像素 等于 N 個物理像素。

06 像素密度

屏幕上每英寸可以顯示的像素點的數(shù)量，單位是 ppi （pixels per inch ），這里還有另一個單位 dpi（dots per inch），兩個值的計算方式都一樣，只是使用的場景不同。PPI 主要用來衡量屏幕，DPI 用來衡量打印機，鼠標(biāo)等設(shè)備。

蘋果曾經(jīng)給出一個標(biāo)準(zhǔn)：手機屏幕達(dá)到 300PPI、平板屏幕達(dá)到 220PPI、筆記本電腦屏幕達(dá)到 200PPI 即可認(rèn)為是 Retina 屏幕。

07 像素比

像素比（DPR dpr）：單一方向上設(shè)備物理像素和設(shè)備獨立像素的比例。

window.devicePixelRatio

像素比的作用：

程序可以根據(jù)像素比來顯示不同的圖片，達(dá)到清晰顯示網(wǎng)頁的效果。

@media screen and (-webkit-min-device-pixel-ratio: 2) {

.logo { background-image: url('./image/logo@2x.png'); }

}

并不是所有的圖片都這樣處理，只需要處理那些頁面布局需要的圖片和圖標(biāo)即可。

三、視口

01 PC端

在 PC 端，視口指的是瀏覽器的可視區(qū)域。其寬度和瀏覽器窗口的寬度保持一致。在 CSS 標(biāo)準(zhǔn)文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源。

02 移動端

移動端的視口與 PC 端不同，有三個視口：

布局視口

視覺視口

理想視口

一般移動設(shè)備的瀏覽器都默認(rèn)定義一個虛擬的布局視口（layout viewport），用于解決早期的頁面在手機上顯示的問題。視口大小由瀏覽器廠商決定，大多數(shù)移動設(shè)備的布局視口大小為 980px。

獲取方式：

document.documentElement.clientWidth

document.documentElement.clientHeight

b. 視覺視口：視覺視口就是用戶可見的區(qū)域。

獲取方式：

window.innerWidth

window.innerHeight

注：不縮放的情況下，視覺視口寬度 == 布局視口寬度。

c.理想視口：寬度與屏幕同寬(設(shè)備獨立像素)的布局視口稱為理想視口。

理想視口的好處：

用戶不需要縮放和滾動條就能看到網(wǎng)站的全部內(nèi)容。

針對移動端的設(shè)計稿更容易開發(fā)。

注意：理想視口不是真實存在的視口

設(shè)置理想視口的方法：

meta name="viewport" content="width=device-width" /// 或者

meta name="viewport" content="initial-scale=1.0" /// 合體

meta name="viewport" content="width=device-width,initial-scale=1.0" /

移動端適配

了解了上面這些相關(guān)概念后，咱們來進(jìn)入主題，看看移動端適配。

移動端設(shè)備的屏幕尺寸繁多，要想讓頁面的呈現(xiàn)統(tǒng)一，需要對不同尺寸的設(shè)備進(jìn)行適配。適配的方式通常有4種：

媒體查詢（meida queries）

viewport + rem適配

Flex布局

vm/vh

01 媒體查詢

meida queries 的方式可以說是我早期采用的布局方式，它主要是通過查詢設(shè)備的寬度來執(zhí)行不同的 css 代碼，最終達(dá)到界面的配置。核心語法是：

@media screen add ( max-width:768px ){

/*當(dāng)屏幕尺寸小于768px時，應(yīng)用下面的css樣式*/

}

02 viewport + rem 適配

em 和 rem 都是 CSS 中的長度單位。而且兩個都是相對長度單位，不過兩個有點區(qū)別：

em 相對的是父級元素的字體大小，

rem 相對的是根元素的字體大小 。

核心是等比縮放

rem 適配的策略有以下幾種：

方法一

先按照 IPhone 6 進(jìn)行頁面布局，再進(jìn)行適配

1、完美視口設(shè)置

2、設(shè)計稿總寬 375 布局

3、設(shè)置 font-size 100px 尺寸轉(zhuǎn)為 rem

4、增加 JS 代碼進(jìn)行頁面適配

方法二

編寫時直接使用 rem 單位進(jìn)行布局

1、完美視口設(shè)置

2、總寬 375 布局

3、以 font-size 100px 進(jìn)行尺寸換算，設(shè)置 rem

4、增加 JS 代碼進(jìn)行頁面適配

方法三

選擇一個設(shè)計稿寬度的比例尺寸作為根元素的字體大小

1、完美視口設(shè)置

2、通過 JS 設(shè)置頁面的根元素字體大小?？梢猿?10 也可以除以其他的數(shù)字

3、根據(jù)設(shè)計稿使用 rem 設(shè)置元素大小

03 flex布局

以天貓的實現(xiàn)方式進(jìn)行說明：

它的viewport是固定的：

meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"

高度定死，寬度自適應(yīng)，元素都采用px做單位。

隨著屏幕寬度變化，頁面也會跟著變化，效果就和PC頁面的流體布局差不多，在哪個寬度需要調(diào)整的時候使用響應(yīng)式布局調(diào)調(diào)就行，這樣就實現(xiàn)了適配。

04 vw／vh

vw 是相對單位，1vw 表示屏幕寬度的 1%?；诖?，我們可以把所有需要適配屏幕大小等比縮放的元素都使用 vw 作為單位。不需要縮放的元素使用 px 做單位。

vw/vh適配一般應(yīng)用在框架中，以vue框架為例，只需要進(jìn)行以下下幾步即可實現(xiàn)適配：

1、安裝 postcss-px-to-viewport

npm i postcss-px-to-viewport

2、在項目根目錄下建名為vue.config.js的文件（不懂為什么要建名為vue.config.js的可以看一下vue-cli下webpack相關(guān)）

3、在vue.config.js中引入postcss-px-to-viewport

const pxtovw = require('postcss-px-to-viewport')

4、vue.config.js中配置項如下

module.exports = {

plugins: {

'postcss-px-to-viewport': {

unitToConvert: 'px', // 需要轉(zhuǎn)換的單位，默認(rèn)為"px"

viewportWidth: 1920, // 設(shè)計稿的視口寬度

unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度

propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表

viewportUnit: 'vw', // 希望使用的視口單位

fontViewportUnit: 'vw', // 字體使用的視口單位

selectorBlackList: [], // 需要忽略的CSS選擇器，不會轉(zhuǎn)為視口單位，使用原有的px等單位。

minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會被轉(zhuǎn)換

mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位

replace: true, // 是否直接更換屬性值，而不添加備用屬性

exclude: undefined, // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件

include: undefined, // 如果設(shè)置了include，那將只有匹配到的文件才會被轉(zhuǎn)換

landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)

landscapeUnit: 'vw', // 橫屏?xí)r使用的單位

landscapeWidth: 1920 // 橫屏?xí)r使用的視口寬度

}

}

}

5、重啟項目就能自適應(yīng)了

05 1px邊框問題

高清屏幕下 1px 對應(yīng)更多的物理像素，所以 1 像素邊框看起來比較粗，解決方法如下：

方法一

1、邊框使用偽類選擇器，或者單獨的元素實現(xiàn)。例如底部邊框

.box2::after{

content:'';

height:1px;

width:100%;

position:absolute;

left:0;

bottom:0;

background:#000;

}

2、在高清屏幕下設(shè)置

@media screen and (-webkit-min-device-pixel-ratio: 2){

.box2{transform:scaleY(0.5);}

}

@media screen and (-webkit-min-device-pixel-ratio: 3){

.box2{transform:scaleY(0.33333);}

}

方法二

1、rem 頁面布局

var fontSize = 50;

document.documentElement.style.fontSize = '50'+ px;

2、元素的邊框設(shè)置為 1px

3、通過 viewport 中的 initial-scale 將頁面整體縮小

var dpr = window.devicePixelRatio;

viewport.setAttribute('content', 'user-scalable=no, initial-scale='+1/dpr + ',user-scalable=no');

4、重新設(shè)置根元素字體

document.documentElement.style.fontSize = fontSize * dpr + 'px';

總結(jié)

本文中例舉的適配方案是目前比較主流的適配方案，大家可以根據(jù)項目需求來使用不同的適配方案，也希望本文能夠幫助到面試的同學(xué)在適配這方面的問題上不再不知所措，跟面試官交流的時候可以問有所答，暢所欲言。