前端必備：自適應(yīng)所有分辨率的神技

為我在公司的開發(fā)電腦的分辨率是1920，所以一開始我實在1920分辨率下寫得css樣式表，然后完成之后放到投影的機(jī)器上做演示，分辨率是1400，結(jié)果就直接悲劇了。

在項目中遇到各種分辨率的調(diào)整問題，看到各位小伙伴們煎熬的表情，真的是于心不忍，于是查詢對應(yīng)的解決辦法，從cssAPI中找到前人提供的高級用法：

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8" /> 
		<title>無標(biāo)題文檔</title> 
		<style> 
			.change{ height:300px; border:1px solid #000; margin:0 auto} 
			@media screen and (min-width: 1201px) { 
			.change {width: 1200px} 
			} 
			/* 設(shè)置了瀏覽器寬度不小于1201px時 change 顯示1200px寬度 */ 
			@media screen and (max-width: 1400px) { 
			.change {width: 900px} 
			} 
			/* 設(shè)置了瀏覽器寬度不大于1200px時 change 顯示900px寬度 */ 
			@media screen and (max-width: 900px) { 
			.change {width: 200px;} 
			} 
			/* 設(shè)置了瀏覽器寬度不大于900px時 change 顯示200px寬度 */ 
			@media screen and (max-width: 500px) { 
			.change {width: 100px;} 
			} 
			/* 設(shè)置了瀏覽器寬度不大于500px時 change 顯示100px寬度 */ 
		</style> 
	</head> 
	<body> 
		<div class="change">CSS實例：DIV寬度會隨瀏覽器寬度變化，嘗試改變?yōu)g覽器寬度</div> 
	</body> 
</html>

另外，可以根據(jù)實際使用的情況或者封裝策略，可以考慮分成多個css文件的配置方式

<!-- 分辨率低于1280，采用test1.css樣式表 -->
<link rel="stylesheet" media="screen and (max-device-width:1440px)" href="test1.css">
<!-- 分辨率高于1400，采用test2.css樣式表 -->
<link rel="stylesheet" media="screen and (min-device-width:1920px)" href="test2.css">

總之上面兩種方式都是對于適應(yīng)各種分辨率的不同習(xí)慣寫法，需要根據(jù)自己項目的封裝規(guī)則自由選擇。需要注意的是樣式的排布順序需要按照分辨率升序或者降序的順序去設(shè)置，否則可能會出現(xiàn)設(shè)置之后并沒有按照想象的效果去顯示。

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

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

相關(guān)概念

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

一、屏幕

1 屏幕大小

屏幕大小指屏幕的對角線的長度，單位一般是英寸。常見的手機(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 屏幕分辨率

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

注意:

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

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

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

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

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

二、像素

01 物理像素

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

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

02 設(shè)備獨立像素

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

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

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

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

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

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

比如 Retina 屏幕：

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

幾款手機(jī)的屏幕像素參數(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 用來衡量打印機(jī)，鼠標(biāo)等設(shè)備。

蘋果曾經(jīng)給出一個標(biāo)準(zhǔn)：手機(jī)屏幕達(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 端不同，有三個視口：

布局視口
視覺視口
理想視口

布局視口：布局視口是用來放置網(wǎng)頁內(nèi)容的區(qū)域。

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

獲取方式：

document.documentElement.clientWidth

document.documentElement.clientHeight

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

獲取方式：

window.innerWidth

window.innerHeight

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

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

理想視口的好處：

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

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

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

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

移動端適配

了解了上面這些相關(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是固定的：

高度定死，寬度自適應(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é)在適配這方面的問題上不再不知所措，跟面試官交流的時候可以問有所答，暢所欲言。

是poetry，點擊上方“關(guān)注”，每天為你分享前端進(jìn)階與個人精進(jìn)干貨。

一、為什么要做適配

為了適應(yīng)各種移動端設(shè)備，完美呈現(xiàn)應(yīng)有的布局效果
各個移動端設(shè)備，分辨率大小不一致，網(wǎng)頁想鋪滿整個屏幕，并在各種分辨下等比縮放

二、適配方案

固定高度，寬度百分比適配-布局非常均勻，適合百分比布局
固定寬度，改變縮放比例適配-什么情況都可以
Rem適配
像素比適配

三、單位

em根據(jù)元素自身的字體大小計算,元素自身 16px 1em=16px
Rem R -> root 根節(jié)點( html ) 根據(jù)html的字體大小計算其他元素尺寸

四、百分比適配(常用)

固定高度，寬度百分比適配

根據(jù)設(shè)置的大小去設(shè)置高度，單位可以用px 百分比 auto
常用Flex布局
百分比寬度

以640設(shè)計稿為例，在外層容器上設(shè)置最大以及最小的寬

#wrapper {
    max-width: 640px; /*設(shè)置設(shè)計稿的寬度*/
    min-width: 300px;
    margin: 0 auto;
}

后面的區(qū)塊布局都用百分比，具體元素大小用px計算

也就是寬度用百分比，高度用px
高度以及圖片不要定死，讓它自動撐開

五、Rem適配(常用)

根據(jù)屏幕的分辨率動態(tài)設(shè)置html的文字大小，達(dá)到等比縮放的功能
保證html最終算出來的字體大小，不能小于12px
在不同的移動端顯示不同的元素比例效果
如果html的font-size:20px的時候，那么此時的1rem=20px
把設(shè)計圖的寬度分成多少分之一，根據(jù)實際情況
rem做盒子的寬度，viewport縮放

head加入常見的meta屬性

<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--這個是關(guān)鍵-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0，minimum-scale=1.0">

把這段代碼加入head中的script預(yù)先加載

// rem適配用這段代碼動態(tài)計算html的font-size大小
(function(win) {
    var docEl=win.document.documentElement;
    var timer='';

    function changeRem() {
        var width=docEl.getBoundingClientRect().width;
        if (width > 750) { // 750是設(shè)計稿大小
            width=750;
        }
        var fontS=width / 10; // 把設(shè)備寬度十等分 1rem=10px
        docEl.style.fontSize=fontS + "px";
    }
    win.addEventListener("resize", function() {
        clearTimeout(timer);
        timer=setTimeout(changeRem, 30);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { //清除緩存
            clearTimeout(timer);
            timer=setTimeout(changeRem, 30);
        }
    }, false);
    changeRem();
})(window)

或者使用淘寶提供的庫 https://github.com/amfe/lib-flexible

布局細(xì)節(jié)

結(jié)構(gòu)用section區(qū)塊劃分更語義化
然后在body設(shè)置寬度

body {
    width: 10rem;
    margin: auto;
}

后面的區(qū)塊都以百分比布局

<div class="wrapper">
   <header><header>
   <section><section>
   <section><section>
   <section><section>
   <section><section>
</div>

section,
header {
    width: 100%;
}

把視覺稿中的 px 轉(zhuǎn)換成 rem

首先，目前日常工作當(dāng)中，視覺設(shè)計師給到前端開發(fā)人員手中的視覺稿尺寸一般是基于 640px 、 750px 以及 1125px 寬度為準(zhǔn)。甚至為什么？大家應(yīng)該懂的（考慮Retina屏）
假定設(shè)計稿的大小為750，那么我們則將整個圖分成10等份來看。<html> 對應(yīng)的 font-size為75px

html{
    font-size: 75px;
}

這樣一來，對于視覺稿上的元素尺寸換算，只需要原始的 px值除以 rem基準(zhǔn)值即可

那么，我們現(xiàn)在就可以比對設(shè)計稿，比如設(shè)計稿中，有一個div元素，寬度，高度都為20px,那么我們這樣寫即可（可以用 markman標(biāo)準(zhǔn)設(shè)計稿的元素大小）

div {
    height: 0.27rem; /*20/75*/
    width: 0.27rem;
}

動態(tài)計算的rem最后會幫我們動態(tài)計算元素在不同屏幕下的寬高
對于設(shè)計稿上的每個元素的尺寸在設(shè)計稿大小已知的時候，我們需要測量出，然后在用測量的寬高除以設(shè)計稿750的十分之一也就是75,得到我們想要的rem。而rem是根據(jù)屏幕動態(tài)變化的，也就達(dá)到了適配的效果。也就是同一套設(shè)計稿運(yùn)用在不同的設(shè)備上。

比如當(dāng)我們切換到320設(shè)備大小的時候，這時候1rem=32px; div的像素實際是0.27*32=8.64px 0.27是我們在已知設(shè)計稿是750的情況下計算出來的，rem用來動態(tài)計算而已

對于margin padding line-height width height使用rem計算

如何快速計算

在實際生產(chǎn)當(dāng)中，如果每一次計算 px 轉(zhuǎn)換 rem ，或許會覺得非常麻煩

`CSSREM` 是一個CSS的 px 值轉(zhuǎn) rem 值的Sublime Text3自動完成插件
插件效果

[圖片上傳失敗…(image-4f244b-1545535128364)]

插件使用方法

安裝
下載本項目，比如：git clone https://github.com/flashlizi/cssrem
進(jìn)入packages目錄：Sublime Text -> Preferences -> Browse Packages…
復(fù)制下載的cssrem目錄到剛才的packges目錄里。
重啟Sublime Text
配置參數(shù)
參數(shù)配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem
px_to_rem - px轉(zhuǎn)rem的單位比例，默認(rèn)為40【根據(jù)設(shè)計稿來設(shè)置，如設(shè)計稿750，我們?nèi)∈种患?span style="color: #E96900; --tt-darkmode-color: #E96900;">75】。
max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的最大長度。默認(rèn)為6。
available_file_types - 啟用此插件的文件類型。默認(rèn)為：[".css", ".less", ".sass"]。

文字適配的解決方案

對于一些標(biāo)題性的文字，我們依然可以用rem。讓他隨著屏幕來進(jìn)行縮放，因為標(biāo)題性文字一般較大，而較大的文字，點陣對其影響就越小。這樣，即使出現(xiàn)奇怪的尺寸，也能夠讓字體得到很好的渲染。
對于一些正文內(nèi)容的文字（即站在使用者的角度，你不希望他進(jìn)行縮放的文字）。我們采用px來進(jìn)行處理

六、縮放比適配

固定寬度，改變縮放比例適配

設(shè)計圖的寬度就是網(wǎng)頁顯示的寬度
改變視口的縮放比例
頁面寬度固定死

// 縮放比例適配方案--用這個代碼 
var width=window.screen.width,
    fixedW=320, //設(shè)計稿寬度的一半
    scale=width / fixedW, // 縮放比例
    meta=document.createElement('meta'),
    metaAttr={
        name : 'viewport',
        content : 'width='+fixedW+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=0'
    };
    for (var key in metaAttr) {
        meta[key]=metaAttr[key];
    }
    document.head.appendChild(meta);

七、像素比適配

window.devicePixelRatio
物理像素是手機(jī)屏幕分辨率
獨立像素指css像素屏幕寬度
像素比=物理像素 / css寬度
獲取設(shè)備的像素比 window.devicePixelRatio

八、小結(jié)

關(guān)于移動端布局方案有很多，rem和百分比運(yùn)用最多的

作者介紹：poetry，專注前端進(jìn)階寫作與個人精進(jìn)干貨，目前在上市公司負(fù)責(zé)小程序等相關(guān)的研發(fā)。

在線咨詢

上一篇：課表來了！4月開始，北京中小學(xué)生網(wǎng)課這樣上
下一篇：七爪源碼：JavaScript 算法入門

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端必備：自適應(yīng)所有分辨率的神技

一、為什么要做適配

二、適配方案

三、單位

四、百分比適配(常用)

五、Rem適配(常用)

六、縮放比適配

七、像素比適配

八、小結(jié)

您的項目需求