筆者從畢業(yè)開始做前端到現(xiàn)在，90% 的項目是移動端打交道，所以當簡歷上寫了“移動H5”幾個字時，必會被問到自適應(yīng)方案與高清方案。

”自適應(yīng)“講的是一套UI(例如750*1334)，在多端下展示近乎一樣的效果;而”高清“是因為 DPR 提升而所做的各種精度適配。

這篇文章講講筆者理解的自適應(yīng)方案和高清方案。

先說結(jié)論

自適應(yīng)方案

• rem 適配思路 選擇一個尺寸作為設(shè)計和開發(fā)基準定義一套適配規(guī)則，自動適配剩余的尺寸特殊適配效果給出設(shè)計效果 屬于歷史產(chǎn)物，CSS 視窗單位未得到主流瀏覽器的支持原理 根據(jù)視窗寬度動態(tài)調(diào)整根元素 html 的 font-size 的值把總寬度設(shè)置為 100 份，每一份被稱為一個單位 。 x，同時設(shè)置 1rem 單位為 10x 缺點 需要加載 js 腳本，而且根據(jù)設(shè)備的視窗寬度進行計算，影響性能 影響力：從2015年出世至今，在 H5 適配領(lǐng)域占據(jù)一定比例相關(guān)技術(shù)庫：flexible、px2rem。
• vw 適配思路(如上)原理 利用 CSS 視窗的特性，總寬度為 100vw，每一份為一個單位 1vw，設(shè)置 1rem 單位為 10vw 缺點 因為是根據(jù)視圖的寬度計算，所以不適用平板和PC 影響力：2018年出的方案，目前 H5 適配主流相關(guān)技術(shù)庫：postcss-px-to-viewport。
• px + calc + clamp 適配思路 根據(jù) CSS 的新特性：css變量、calc()函數(shù)、clamp()、@container函數(shù)實現(xiàn) 特點 解決了rem、vw布局的致命缺點：失去像素的完美性，而且一旦屏幕低于或高于某個閾值，通常就會出現(xiàn)布局的移動或文字內(nèi)容的溢出大漠在2021年提出，最先進，但沒看到大廠使用(clamp函數(shù)瀏覽器支持率暫且不高)。

高清方案

• 像素問題的解決方案。
• 不同 DPR 下圖片的高清解決方案。

綜上，自適應(yīng)方案是解決各終端的適配問題，高清方案是解決Retina屏的細節(jié)處理。

寫在前面

在說移動端適配方案之前先整明白一些技術(shù)概念。

設(shè)備獨立像素

設(shè)備獨立像素(DIP)=== CSS 像素 === 邏輯像素，在 Chrome 中能直接看到 375* 667。

chrome中查看css像素

當你看到設(shè)備獨立像素時，不要慌，它表示 CSS 像素，而它的長寬就是在 Chrome 中所查到的?？蛇@樣記憶，“設(shè)備獨立像素”，字數(shù)長，文縐縐就是 CSS 像素，也是理論上人為給定的指標，也叫邏輯像素。

物理像素

物理像素可以理解為手機廠商在賣手機時宣傳的分辨率，即物理像素 = 分辨率，它表示垂直和水平上所具有的像素點數(shù)。

也就是說設(shè)備屏幕的水平方向上有 1920 像素點，垂直方向有 1080 像素點(假設(shè)屏幕分辨率為1920*1080)，即屏幕分辨率表示物理像素，它在出廠時就定下來，單位為 pt，1pt=0.376mm。

手機分辨率

物理像素，又被稱為設(shè)備像素，即表示 設(shè)備像素 === 物理像素。可這樣記憶，設(shè)備在物理世界能測量的長度。

DPR(Device Pixel Ratio)

而設(shè)備像素比(DPR)是什么?

DPR = 設(shè)備像素 / 設(shè)備獨立像素，它通常與視網(wǎng)膜屏(Retina 屏)有關(guān)。

以 iPhone7 為例子，iPhone7 的 DPR = iPhone7 物理像素 / iPhone7 設(shè)備獨立像素 = 2。

寬 1334 / 667 = 2

高 750 / 375 = 2

得到 iPhone7 的 DPR 為 2，也就是我們常說的視網(wǎng)膜屏幕，而這就是營銷術(shù)語，它就是因為技術(shù)的進步，使得一個 CSS 像素塞入更多的物理像素。

營銷術(shù)語還有哪些：農(nóng)夫山泉的大自然的搬運工、元氣森林的“気”。

筆者是這么記憶的：

• CSS 像素(設(shè)備獨立像素)就像一個容器，以前是一比一塞入，所以 DPR 為 1，后來技術(shù)發(fā)展進步了，一個容器中能塞入更多的真實像素(物理像素)。
• DPR = 設(shè)備像素 / 設(shè)備獨立像素。
• DPR = 物理像素(真實)/ CSS 像素(虛的)。

在視網(wǎng)膜屏幕中，以 DPR = 2 為例，把 4(2x2)個物理像素當一個 CSS 像素使用，這樣讓屏幕看起來更加清晰(精致)，但是元素的大小(CSS像素)本身不會改變。

DPR對比

隨著硬件的發(fā)展，像 iPhone13 Pro 等手機的 DPR 已經(jīng)為 3，未來 DPR 突破 4 不是問題。

說回來，DPR 為 2 或 3 會有什么問題?我們以 CSS 為最小單位來寫代碼的，展示在屏幕上也是以 CSS 為最小單位來展示，也就是說在 DPR 為 2 時，我們想要模擬 1 單位物理像素是做不到的(如果瀏覽器支持用 0.5px CSS 的話，可以模擬，但是DPR為 3 呢，用 0.333px?);又因為手機的設(shè)備獨立像素(CSS 像素)固定，使用傳統(tǒng)靜態(tài)布局(固定 px)時，會出現(xiàn)樣式的錯位。

iPhone 5/SE: 320 * 568 DPR: 2
iPhone 6/7/8: 375 * 667 DPR: 2
iPhone 6/7/8 Plus: 414* 736 DPR: 3
iPhone X: 375 * 812 DPR: 3

所以我們要適配各終端的 CSS 像素以及不同 DPR 下，出現(xiàn)的 1 像素問題、圖片高清問題等。隨著技術(shù)的發(fā)展，前端們擺脫了 IE 的兼容，同時陷入了各大手機品牌的兼容沼澤。

自適應(yīng)方案

Rem 布局——天下第二

簡介：rem 就是相對于根元素 html 的 font-size 來做計算。

與 rem 相關(guān)聯(lián)的是 em：

em 作為 font-size 單位時，其代表父元素的字體大小，em 作為其它屬性單位時，代表自身字體大小。

rem 作用于非根元素時，相對于根元素字體大小，rem 作用于根元素字體時，相對于其初始字體大小。

本質(zhì)：等比縮放，是通過 JavaScript 來模擬 vw 的特性。

假設(shè)將屏幕寬度平均分為 100 份，每一份的寬度用 x 表示，x = 屏幕寬度 / 100，如果將 x 作為單位，x 前面的數(shù)值就代表屏幕寬度的百分比。

p { width: 50x } /* 屏幕寬度的 50% */ 

如果想要頁面元素隨著屏幕寬度等比變化，我們就需要上面的 x，這個 x 就是 vw，但是 vw 是在瀏覽器支持后才大規(guī)模使用，在此之前，js + rem 可模擬這種效果。

之前說了，rem 作用于非根元素時，相對于根元素字體大小，所以我們設(shè)置根元素單位后，非根元素使用 rem 做相對單位。

html { font-size: 16px }
p { width: 2rem } /* 32px */

html { font-size: 32px }
p { width: 2rem } /* 64px */

問題來了，我們要獲取到一個動態(tài)的根元素 font-size，并以此變化各個元素大小。

有趣的是，我司兩個項目目前的做法是通過媒體查詢設(shè)置根元素，分為四檔，默認16px。

筆者對這種做法表示不理解，原開發(fā)人員說我們這套運行了6年，UI適配也沒人說什么問題。這里就有個疑問了，真的如他所說UI適配的很好嗎，”媒體查詢根元素+rem“也能適配好嗎?是否完美呢?

后續(xù)筆者也會在 demo 中展示這種做法。

但是根元素的 font-size 怎么變化，它不可能一直是 16px，在中大屏下還可以，但是在小屏下字體就太大了，所以它的大小也應(yīng)該是動態(tài)獲取的。如何讓其動態(tài)化，就是上文所說，讓根元素的 font-size 大小恒等于屏幕寬度的 1/100。

html { font-size: width / 100};

如何設(shè)置 html 的字體大小恒等于屏幕寬度的百分之一呢?可以通過 js 來設(shè)置，一般需在頁面 dom ready、resize 和屏幕旋轉(zhuǎn)中設(shè)置。

document.documentElement.style.fontSize = 
document.documentElement.clientWidth / 100 + 'px';

flexible 源碼就如以上思路寫的。

我們設(shè)置了百分之一的寬度后，在寫 css 時，就需要利用 scss/less 等 css 處理器來對 css 編譯處理。假設(shè)給出的設(shè)計圖為 750 * 1334，其中一個元素寬度為 200 px，根據(jù)公式：

width: 200 / 750 * 100 = 26.67 rem

在 sass 中，需要設(shè)置設(shè)計圖寬度來做換算：

@use 'sass:math';

$width: 750px;

@function px2rem($px) {
  @return #{math.div($px, $width) * 100}rem;
}

上面編譯完后。

div {width: 26.667rem}

在不同尺寸下，它的寬度不同。

機型 尺寸 width iPhone 5/SE 320 * 568 170 * 170 iPhone 6/7/8 375 * 667 200 * 200 iPhone 6/7/8 Plus 414 * 736 220.797 * 220.797 iPhone X 375 * 812 200 * 200。

效果如下(特意說明：圖中演示的是引入 flexible 庫，它的根元素的 font-size 為屏幕的 1/10)。

rem布局

REM 布局(flexible)demo

優(yōu)點：rem 的兼容性能低到 ios 4.1，android 2.1。

缺點：

等比放大(可以說優(yōu)點也可以理解為缺點，不同場景下使用) 用戶選擇大屏幕有幾個出發(fā)點，有些人想要更大的字體，更大的圖片，有些人想要更多的內(nèi)容，并不想要更大的圖標。

字體大小不能使用 rem(一般使用媒體查詢控制 font-size 大小)。

在 PC 端瀏覽破相，一般設(shè)置一個最大寬度。

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';
body {
 margin: auto;
 width: 100rem;
}

• 如果用戶禁止 js 怎么辦? 添加 noscripe 標簽提示用戶 給 HTML 添加一個 默認字體大小。

相關(guān)技術(shù)方案：flexible(amfe-flexible 或者 lib-flexible) + postcss-pxtorem。

Viewport 布局——天不生我VW，適配萬古如長夜

vw 是基于 Viewport 視窗的長度單位，這里的視窗(Viewport) 指的是瀏覽器可視化的區(qū)域，而這個可視區(qū)域是 window.innerWidth/window.innerHeight 的大小

根據(jù) CSS Values and Units Module Level 4： vw 等于初始包含塊(html元素)寬度的1%，也就是：

• 1vw 等于 window.innerWidth 的數(shù)值的 1%。
• 1vh 等于 window.innerHeight 的數(shù)值的 1%。

看圖理解：

屏幕的寬高

在說 rem 布局時，曾經(jīng)舉過 x 的例子，x 就是 vw。

/* rem 方案 */
html { font-size: width / 100}
div { width: 26.67rem }

/* vw 方案 */
div { width: 26.67vw }

vw 還可以和 rem 方案結(jié)合，這樣計算 html 字體大小就不需要 js 了。

html { font-size: 1vw }
div {width: 26.67rem }

效果如下：

vw適配

vw 適配是 CSS 原生支持，而且目前兼容性大多數(shù)手機是支持的，也不需要加載 js ，也不會因為 js引發(fā)性能問題。

vw 確實看上去很不錯，但是也存在一些問題。

也沒能很好的解決 1px 邊框在高清屏下的顯示問題，需要自行處理。

由于 vw 方案是完全的等比縮放，在 PC 端上會破相(和 rem一樣)。

相關(guān)技術(shù)方案：postcss-px-to-viewport。

VW 布局demo。

px適配——一力降十會

不用 rem/vw，用傳統(tǒng)的響應(yīng)式布局也能在移動端布局中使用，需要設(shè)計規(guī)范。

使用css 變量適配(篇幅原因暫不詳細介紹，可直接看代碼)。

使用場景：新聞、內(nèi)容型的網(wǎng)站，不太適用 rem，因為大屏用戶想要看到更多的內(nèi)容，如網(wǎng)易新聞、知乎、taptap

PX + CSS變量 demo。。

媒體查詢——可有我一席?

上文講到我司原先H5端采用媒體查詢的方式來做適配，筆者嘗試復(fù)刻了下，只能說大差不差，能看出媒體查詢想做成這件事，但還是心有余而力不足。

采用rem、vw、px等方法能實現(xiàn)非標準尺寸(375 * 667設(shè)計稿)下 header 的高度為 165.59px，而 media 因為大屏，將根font-size 設(shè)置為17px，結(jié)果 header 的高度成為 159.38px(17 * 9.375rem)。

如下GIF所示：

媒體查詢布局與其他布局對比

所以說僅用媒體查詢還是差強人意。

媒體查詢布局demo。

各種適配的對比

vw、rem 適配的本質(zhì)都是等比例縮放，px 直接寫，孰優(yōu)孰劣看自己。

REM布局 VW布局 PX + css變量布局 容器最小寬度 支持 不支持 支持 容器最大寬度 支持 不支持 支持 高清設(shè)備1px邊框 支持 支持 支持 容器固定縱橫比 支持 支持 支持 優(yōu)點

• 1.老牌方案。2.支持高清設(shè)備1px邊框時，可按以往方式直接寫
• 1.無需引入js。2. 天然支持，寫法規(guī)范 同VW 缺點
• 1. 需要引入 js 設(shè)置 html 的font-size。2. 字體大小不能使用 rem。3. 在 PC 端瀏覽會破相，一般需設(shè)置最大寬度
• 1.在PC端會破相2.不支持老舊手機 同VW

除此之外，還有搭配 vw 和rem 的方案

• 給根元素大小設(shè)置隨著視窗變化而變化的vw單位，動態(tài)變化各元素大小
• 限制根元素字體大小的最大最小值，配合body加上最大寬度和最小寬度

// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同時，通過Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小
body {
    max-width: 540px;
    min-width: 320px;
}

高清方案

像素問題

像素指在 Retina 屏顯示 1單位物理像素

很好理解，CSS 像素(設(shè)備獨立像素)是我們?nèi)藶橐?guī)定的，當 DPR 為 1 時，1像素(指我們寫的 CSS 像素) 等于 1物理像素;但當 DPR 為 3 時，1像素就為 3 物理像素。

• DPR = 1，此時 1 物理像素 等于 1 CSS 像素。
• DPR = 2，此時 1 物理像素等于 0.5 CSS 像素 border-width: 1px，這里的 1px 其實是 1 CSS 像素寬度，等于 2 物理像素，設(shè)計師其實想要的是 border-width: 0.5px。
• DPR = 3，此時 1 物理像素等于 0.33 CSS 像素 設(shè)計師想要的是 border-width: 0.33px。

像素問題

解決思路

使用 0.5px 。有局限性，iOS 8及以上，蘋果系統(tǒng)支持，但是 iOS 8以下和 Android(部分低端機)，會將0.5px 顯示為 0px。

既然 1 個 CSS 像素代表 2(DPR 為2)、3(DPR為3)物理像素，設(shè)備又不認識 0.5px 的寫法，那就畫 1px，然后想辦法將寬度減少一半。

方案

• 漸變實現(xiàn) background-image: linear-gradient(to top, ,,,)。
• 使用縮放實現(xiàn) transform: scaleY(0.333)。
• 使用圖片實現(xiàn) base64。
• 使用 SVG 實現(xiàn) 嵌入 background url。
• border-image 低端機下支持度不好。

以上都是通過 CSS 的媒體查詢來實現(xiàn)的。

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
    only screen and (min-device-pixel-ratio: 3) {
        
}

圖片適配和優(yōu)化

圖像通常占據(jù)了網(wǎng)頁上下載資源絕大部分，優(yōu)化圖像通?？梢宰畲笙薅鹊販p少從網(wǎng)站下載的字節(jié)數(shù)以及提高網(wǎng)站性能。

通?？梢?，有一些通用的優(yōu)化手段：為不同 DPR 屏幕提供最適合的圖片尺寸。

各大廠商的適配分析

看了不少文章，類似如：大廠是怎么做移動端適配的。

各大廠，有用rem適配的、也有用vm適配的、也有vm+rem結(jié)合適配的，純用 px 方案的也有。

• 新聞、社區(qū)等可閱讀內(nèi)容較多的場景：px+flex+百分比 如攜程、知乎、TapTap。
• 對視覺組件種類較多，依賴性較強的移動端頁面：vw+rem 如電商、論壇。

總結(jié)

rem 方案，引入 amfe-flexible 庫。

設(shè)計：設(shè)計出圖是 750 * 1334，設(shè)計切好圖后，上傳藍湖，按照尺寸寫 px。。

開發(fā)：

• 使用 rem 方案 引入 amfe-flexible 庫安裝 px2rem 之類的 px 轉(zhuǎn) rem 工具配置 px2rem在項目中寫 px ，輸出時是 rem適用任何場景。
• 使用 vw 方案 安裝 px2vw 之類的 px 轉(zhuǎn) vw 工具配置 px2vw在項目中寫 px，輸出時是 vw適用任何場景
• 使用 px 方案 該怎么樣就怎么寫，不過因為有設(shè)計規(guī)劃，按鈕的大中小尺寸固定、icon 的尺寸有標準、TabBar 。 的高度也是寫死的，當一切都有標準后，寫頁面就方便了例如 左邊固定 100 * 50，右邊 flex 布局左邊固定 100 * 50，右邊 calc(100% - 100px)(使用 CSS3 中的 calc 計算)。

其他

caniuse 網(wǎng)站測試CSS屬性與瀏覽器的兼容性問題。

疑問

Q：為什么 H5 移動端UI庫單位大都是用 px?這樣不會有適配問題嗎?

其實我們寫好 px 后，如果項目采用 rem 寫業(yè)務(wù)，引入 px2rem(已經(jīng)六年沒有維護了) 即可轉(zhuǎn)換。

在有贊 vant 庫中，它對瀏覽器適配的介紹是：

Viewport 布局

• Vant 默認使用 px 作為樣式單位，如果需要使用 viewport 單位(vw、vh、vmin、vmax)，推薦使用 。 postcss-px-to-viewport 進行轉(zhuǎn)換。
• postcss-px-to-viewport 是一款 PostCSS 插件，用于將 px 單位轉(zhuǎn)化為 vw/vh 單位。

Rem 布局

• 如果需要使用 rem 單位進行適配，推薦使用以下兩個工具：
• postcss-pxtorem 是一款 PostCSS 插件，用于將 px 單位轉(zhuǎn)化為 rem 單位。
• lib-flexible 用于設(shè)置 rem 基準值。

demo 合集：線上demo。

參考資料

前端基礎(chǔ)知識概述 -- 移動端開發(fā)的屏幕、圖像、字體與布局的兼容適配

Rem布局的原理解析

再談Retina下1px的解決方案

再聊移動端頁面的適配

如何在Vue項目中使用vw實現(xiàn)移動端適配

細說移動端 經(jīng)典的 REM 布局 與 新秀 VW 布局