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

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

相關(guān)概念

要搞明白移動(dòng)端適配問題，就要先搞明白屏幕、像素和視口三個(gè)概念。

一、屏幕

1 屏幕大小

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

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

注意:

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

1foot = 12inch

1inch = 2.54cm

02 屏幕分辨率

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

展開全文

注意:

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

屏幕分辨率與顯示分辨率不同。計(jì)算機(jī)可以修改顯示分辨率，信號(hào)傳遞給屏幕，在屏幕上顯示。

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

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

幾款手機(jī)的屏幕分辨率：

二、像素

01 物理像素

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

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

02 設(shè)備獨(dú)立像素

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

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

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

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

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

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

比如 Retina 屏幕：

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

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

03 CSS 像素

CSS 像素又稱為虛擬像素，是一個(gè)相對(duì)單位，單位為 px。

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

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

04 位圖像素

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

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

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

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

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

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

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

06 像素密度

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

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

07 像素比

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

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 移動(dòng)端

移動(dòng)端的視口與 PC 端不同，有三個(gè)視口：

布局視口

視覺視口

理想視口

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

獲取方式：

document.documentElement.clientWidth

document.documentElement.clientHeight

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

獲取方式：

window.innerWidth

window.innerHeight

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

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

理想視口的好處：

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

針對(duì)移動(dòng)端的設(shè)計(jì)稿更容易開發(fā)。

注意：理想視口不是真實(shí)存在的視口

設(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" /

移動(dòng)端適配

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

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

媒體查詢（meida queries）

viewport + rem適配

Flex布局

vm/vh

01 媒體查詢

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

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

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

}

02 viewport + rem 適配

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

em 相對(duì)的是父級(jí)元素的字體大小，

rem 相對(duì)的是根元素的字體大小 。

核心是等比縮放

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

方法一

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

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

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

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

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

方法二

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

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

2、總寬 375 布局

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

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

方法三

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

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

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

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

03 flex布局

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

它的viewport是固定的：

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

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

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

04 vw／vh

vw 是相對(duì)單位，1vw 表示屏幕寬度的 1%?；诖耍覀兛梢园阉行枰m配屏幕大小等比縮放的元素都使用 vw 作為單位。不需要縮放的元素使用 px 做單位。

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

1、安裝 postcss-px-to-viewport

npm i postcss-px-to-viewport

2、在項(xiàng)目根目錄下建名為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中配置項(xiàng)如下

module.exports = {

plugins: {

'postcss-px-to-viewport': {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

}

}

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

05 1px邊框問題

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

方法一

1、邊框使用偽類選擇器，或者單獨(dú)的元素實(shí)現(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ù)項(xiàng)目需求來使用不同的適配方案，也希望本文能夠幫助到面試的同學(xué)在適配這方面的問題上不再不知所措，跟面試官交流的時(shí)候可以問有所答，暢所欲言。