前端必備：自適應所有分辨率的神技

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

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

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

另外，可以根據實際使用的情況或者封裝策略，可以考慮分成多個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">

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

所周知，前端的移動端適配問題是個老生常談的問題，面試中也是經常被問到，面試官經常是一句“你是怎么做移動端適配的”或者“談談你對移動端適配的理解”就讓面試者感覺不知道該從什么地方下手去回答這個問題。手機市場日漸豐富的同時，給我們前端開發人員帶來的網頁內容自適應屏幕尺寸進行顯示的問題也日漸凸顯出來。

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

相關概念

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

一、屏幕

1 屏幕大小

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

常見手機屏幕查看網址： http://screensiz.es/ 。

注意:

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

1foot=12inch

1inch=2.54cm

02 屏幕分辨率

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

注意:

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

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

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

2K 屏幕是單一方向分辨率具有約 2000 像素的顯示設備。最標準的 2K 分辨率為 2048×1024。

幾款手機的屏幕分辨率：

二、像素

01 物理像素

設備像素 / 物理像素是一個長度單位。1 物理像素對應顯示設備中一個微小的物理部件。

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

02 設備獨立像素

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

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

1 個設備獨立像素可以認為是計算機坐標系統中的一個點，代表可以通過程序控制使用的虛擬像素。

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

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

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

比如 Retina 屏幕：

Retina 是蘋果公司 2010 年推出的一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。

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

03 CSS 像素

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

CSS 像素不能直接跟現實中的長度單位換算。

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

04 位圖像素

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

矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接的點。放大后不會失真。軟件有Adobe Illustrator，Sketch (svg)。

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

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

05 像素之間的關系

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

在一個標準的顯示密度下(普通屏)，一個 CSS 像素對應著一個設備像素，高清屏幕下一個 CSS 像素等于 N 個物理像素。

06 像素密度

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

蘋果曾經給出一個標準：手機屏幕達到 300PPI、平板屏幕達到 220PPI、筆記本電腦屏幕達到 200PPI 即可認為是 Retina 屏幕。

07 像素比

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

window.devicePixelRatio

像素比的作用：

程序可以根據像素比來顯示不同的圖片，達到清晰顯示網頁的效果。

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

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

}

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

三、視口

01 PC端

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

02 移動端

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

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

布局視口：布局視口是用來放置網頁內容的區域。

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

獲取方式：

document.documentElement.clientWidth

document.documentElement.clientHeight

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

獲取方式：

window.innerWidth

window.innerHeight

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

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

理想視口的好處：

用戶不需要縮放和滾動條就能看到網站的全部內容。

針對移動端的設計稿更容易開發。

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

設置理想視口的方法：

移動端適配

了解了上面這些相關概念后，咱們來進入主題，看看移動端適配。

移動端設備的屏幕尺寸繁多，要想讓頁面的呈現統一，需要對不同尺寸的設備進行適配。適配的方式通常有4種：

媒體查詢（meida queries）
viewport + rem適配
Flex布局
vm/vh

01 媒體查詢

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

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

/*當屏幕尺寸小于768px時，應用下面的css樣式*/

}

02 viewport + rem 適配

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

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

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

核心是等比縮放

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

方法一

先按照 IPhone 6 進行頁面布局，再進行適配

1、完美視口設置

2、設計稿總寬 375 布局

3、設置 font-size 100px 尺寸轉為 rem

4、增加 JS 代碼進行頁面適配

方法二

編寫時直接使用 rem 單位進行布局

1、完美視口設置

2、總寬 375 布局

3、以 font-size 100px 進行尺寸換算，設置 rem

4、增加 JS 代碼進行頁面適配

方法三

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

1、完美視口設置

2、通過 JS 設置頁面的根元素字體大小。可以除以 10 也可以除以其他的數字

3、根據設計稿使用 rem 設置元素大小

03 flex布局

以天貓的實現方式進行說明：

它的viewport是固定的：

高度定死，寬度自適應，元素都采用px做單位。

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

04 vw／vh

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

vw/vh適配一般應用在框架中，以vue框架為例，只需要進行以下下幾步即可實現適配：

1、安裝 postcss-px-to-viewport

npm i postcss-px-to-viewport

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

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', // 需要轉換的單位，默認為"px"

viewportWidth: 1920, // 設計稿的視口寬度

unitPrecision: 5, // 單位轉換后保留的精度

propList: ['*'], // 能轉化為vw的屬性列表

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

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

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

minPixelValue: 1, // 設置最小的轉換數值，如果為1的話，只有大于1的值會被轉換

mediaQuery: false, // 媒體查詢里的單位是否需要轉換單位

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

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

include: undefined, // 如果設置了include，那將只有匹配到的文件才會被轉換

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

landscapeUnit: 'vw', // 橫屏時使用的單位

landscapeWidth: 1920 // 橫屏時使用的視口寬度

}

5、重啟項目就能自適應了

05 1px邊框問題

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

方法一

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

.box2::after{

content:'';

height:1px;

width:100%;

position:absolute;

left:0;

bottom:0;

background:#000;

}

2、在高清屏幕下設置

@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、元素的邊框設置為 1px

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

var dpr=window.devicePixelRatio;

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

4、重新設置根元素字體

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

總結

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

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

一、為什么要做適配

為了適應各種移動端設備，完美呈現應有的布局效果
各個移動端設備，分辨率大小不一致，網頁想鋪滿整個屏幕，并在各種分辨下等比縮放

二、適配方案

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

三、單位

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

四、百分比適配(常用)

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

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

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

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

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

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

五、Rem適配(常用)

根據屏幕的分辨率動態設置html的文字大小，達到等比縮放的功能
保證html最終算出來的字體大小，不能小于12px
在不同的移動端顯示不同的元素比例效果
如果html的font-size:20px的時候，那么此時的1rem=20px
把設計圖的寬度分成多少分之一，根據實際情況
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">
<!--這個是關鍵-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0，minimum-scale=1.0">

把這段代碼加入head中的script預先加載

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

    function changeRem() {
        var width=docEl.getBoundingClientRect().width;
        if (width > 750) { // 750是設計稿大小
            width=750;
        }
        var fontS=width / 10; // 把設備寬度十等分 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

布局細節

結構用section區塊劃分更語義化
然后在body設置寬度

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

后面的區塊都以百分比布局

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

section,
header {
    width: 100%;
}

把視覺稿中的 px 轉換成 rem

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

html{
    font-size: 75px;
}

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

那么，我們現在就可以比對設計稿，比如設計稿中，有一個div元素，寬度，高度都為20px,那么我們這樣寫即可（可以用 markman標準設計稿的元素大小）

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

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

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

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

如何快速計算

在實際生產當中，如果每一次計算 px 轉換 rem ，或許會覺得非常麻煩

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

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

插件使用方法

安裝
下載本項目，比如：git clone https://github.com/flashlizi/cssrem
進入packages目錄：Sublime Text -> Preferences -> Browse Packages…
復制下載的cssrem目錄到剛才的packges目錄里。
重啟Sublime Text
配置參數
參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem
px_to_rem - px轉rem的單位比例，默認為40【根據設計稿來設置，如設計稿750，我們取十分之一即75】。
max_rem_fraction_length - px轉rem的小數部分的最大長度。默認為6。
available_file_types - 啟用此插件的文件類型。默認為：[".css", ".less", ".sass"]。

文字適配的解決方案

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

六、縮放比適配

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

設計圖的寬度就是網頁顯示的寬度
改變視口的縮放比例
頁面寬度固定死

// 縮放比例適配方案--用這個代碼 
var width=window.screen.width,
    fixedW=320, //設計稿寬度的一半
    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
物理像素是手機屏幕分辨率
獨立像素指css像素屏幕寬度
像素比=物理像素 / css寬度
獲取設備的像素比 window.devicePixelRatio

八、小結

關于移動端布局方案有很多，rem和百分比運用最多的

作者介紹：poetry，專注前端進階寫作與個人精進干貨，目前在上市公司負責小程序等相關的研發。

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端必備：自適應所有分辨率的神技

一、為什么要做適配

二、適配方案

三、單位

四、百分比適配(常用)

五、Rem適配(常用)

六、縮放比適配

七、像素比適配

八、小結

您的項目需求