正文

移動(dòng)端適配方案阮一峰（移動(dòng)端適配布局）

發(fā)布時(shí)間：2023-04-10 16:05:44 稿源：創(chuàng)意嶺閱讀： 55

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于移動(dòng)端適配方案阮一峰的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話(huà)答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線(xiàn)網(wǎng)頁(yè)版、PC客戶(hù)端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請(qǐng)撥打電話(huà)175-8598-2043，或添加微信：1454722008

本文目錄:

1、移動(dòng)端H5頁(yè)面適配問(wèn)題研究
2、H5+CSS3移動(dòng)端適配技術(shù)
3、Vant移動(dòng)端rem適配方案
4、移動(dòng)端，PC端是怎么做適配的？

移動(dòng)端適配方案阮一峰（移動(dòng)端適配布局）

一、移動(dòng)端H5頁(yè)面適配問(wèn)題研究

剛開(kāi)始做移動(dòng)端web開(kāi)發(fā)的同學(xué)應(yīng)該都碰到過(guò)頁(yè)面適配問(wèn)題，為什么我在開(kāi)發(fā)手機(jī)上調(diào)試好的頁(yè)面在其他手機(jī)會(huì)有這樣或那樣的樣式問(wèn)題？ viewport 我也設(shè)置了，為什么還是顯示不正常？難道我要為每種手機(jī)屏幕寫(xiě)媒體查詢(xún)，有沒(méi)有簡(jiǎn)單的方式，可以不用關(guān)注手機(jī)屏幕的差異性呢？

百度中搜索移動(dòng)端H5頁(yè)面適配關(guān)鍵字，大概可以得到180多萬(wàn)的搜索結(jié)果，由此可見(jiàn)這個(gè)問(wèn)題也得到很多人的關(guān)注。本文的目的主要是分析解決移動(dòng)端H5頁(yè)面適配問(wèn)題過(guò)程中牽扯到的知識(shí)點(diǎn)，然后梳理分析目前常見(jiàn)的適配解決方案。

由于本文內(nèi)容較長(zhǎng)，下面先給出文章的提綱：

1.1理解移動(dòng)端單位

　 1.2理解viewport

2.1圖片高清適配

　 2.2字體大小適配

　 2.3布局寬度適配

---這里是分隔符，正文開(kāi)始---

不知道正在看文章的你對(duì)上面列出來(lái)的這些單位是不是很熟悉，如果是的話(huà)，就可以跳過(guò)了。

理解這些單位的用法以及區(qū)別，對(duì)理解移動(dòng)端頁(yè)面適配有很大的幫助。為了讓你對(duì)上面的單位有個(gè)大體的認(rèn)知，這里把上面的單位分成了三類(lèi)：

下面分別對(duì)每個(gè)單位展開(kāi)分析：

*** dpi / ppi ***

** dpi ** , dot per inch ，每英寸的點(diǎn)數(shù)；打印或印刷領(lǐng)域使用的單位，代表打印機(jī)每英寸可以打印出的點(diǎn)數(shù) 。

ppi , pixel per inch ，每英寸的像素?cái)?shù)，像素密度；表示圖像或者顯示器單位面積上像素?cái)?shù)量。

dpi 和 ppi 都是描述分辨率的單位，但是兩者是有區(qū)別的，但是在描述手機(jī)分辨率時(shí)，可以認(rèn)為兩者意義相同，以前android設(shè)備偏向于使用 dpi ，ios設(shè)備偏向于使用 ppi ，目前android和ios統(tǒng)一使用 ppi 描述手機(jī)屏幕的像素顯示密度。

ppi的計(jì)算方法：

*** ldpi、mdpi、hdpi、xhdpi、xxhdpi ***

android對(duì)移動(dòng)設(shè)備不同屏幕分辨率的分類(lèi)。

*** pt，pc，sp ***

** pt ** ，磅（point的音譯），印刷中使用的表示字型的大小單位，1inch = 72pt （印刷中這個(gè)關(guān)系成立，ios中不成立），ios開(kāi)發(fā)中使用的邏輯單位，是和設(shè)備無(wú)關(guān)的單位。

** pc ** 印刷中使用的單位，1pc = 12pt，不需要關(guān)注。

** sp **， scale independent pixel ，android設(shè)備中用來(lái)顯示字體大小的，和設(shè)備無(wú)關(guān)的尺寸，當(dāng)設(shè)置字體大小單位為sp時(shí)，android系統(tǒng)字體大小會(huì)影響設(shè)置的字體渲染時(shí)的大小。

*** dip / dp ***

** dp/dip**， device independent pixel，表示設(shè)備獨(dú)立像素，和設(shè)備無(wú)關(guān)的尺寸，相同的dp/dip值，不同設(shè)備展示的效果是一樣的。

android使用的單位，之前偏向使用dip，目前建議使用dp。

android設(shè)備中，規(guī)定160ppi的屏幕，1dp = 1px；320ppi的屏幕，1dp = 2px，所以android設(shè)備中dp的計(jì)算方法：dp = px * (ppi / 160)，這里的px是指設(shè)備的物理像素點(diǎn)。

和ios開(kāi)發(fā)中用的pt單位類(lèi)似。

*** px ***

** px ** ，像素，有兩種像素概念，一種是網(wǎng)頁(yè)設(shè)計(jì)中使用的css像素，一種是原生移動(dòng)系統(tǒng)使用的物理像素。

作為css像素時(shí)，表示的也是一種設(shè)備無(wú)關(guān)單位，與android中使用的dp類(lèi)似，默認(rèn)情況下與系統(tǒng)分辨率下的像素大小相同，標(biāo)清設(shè)備中，一個(gè)css像素和一個(gè)設(shè)備物理像素大小相同；在高清設(shè)備中，一個(gè)css像素可以大于或者等于多個(gè)設(shè)備物理像素，具體一個(gè)css像素，需要多少個(gè)物理像素來(lái)展示，瀏覽器會(huì)根據(jù)dpr計(jì)算。

原生移動(dòng)系統(tǒng)中使用px單位時(shí)，表示的就是屏幕的物理像素點(diǎn)，每種屏幕的物理像素點(diǎn)大小可能不一樣。

*** dpr ***

** dpr ** ，device pixel ratio，橫向或者縱向設(shè)備物理像素?cái)?shù)量與設(shè)備獨(dú)立像素?cái)?shù)量的比值，瀏覽器中可以通過(guò)window.devicePixelRatio獲取(存在兼容性問(wèn)題)。

對(duì)于原生app，ios和android系統(tǒng)會(huì)自動(dòng)根據(jù)dpr計(jì)算出渲染時(shí)需要的px值，最終不同屏幕上展示出來(lái)的大小很接近；而移動(dòng)端頁(yè)面渲染時(shí)想要做到這一點(diǎn)，就必須首先得到設(shè)備的dpr，然后再根據(jù)dpr計(jì)算渲染需要的px值。

ios設(shè)備中iphone3的dpr為1；iphone4,5,6,7的dpr為2；iphone6+,7+的dpr為3。iphone6+和iphone7+實(shí)際計(jì)算出來(lái)的dpr應(yīng)該時(shí)2.6左右，但是官方還是建議dpr為3，這是因?yàn)閕os系統(tǒng)利用了一種“縮減像素采樣”算法，自動(dòng)縮減到2.6。

android設(shè)備中dpr值有多種，可知的有0.75，1，1.5，1.75，2，2.5，2.75，3，4等。

*** em，rem ***

** em ** 相對(duì)單位，CSS2引入的單位，作為字體大小使用時(shí)和百分比單位類(lèi)似，都是相對(duì)于最近的父元素設(shè)置的字體大小，在body上設(shè)置字體大小為100%和設(shè)置字體大小為1em是一樣的效果，默認(rèn)情況下瀏覽器的字體大小為16px，這樣只要瀏覽器默認(rèn)得字體大小不變，1em = 16px。

** rem ** 相對(duì)單位，root em，CSS3新增的單位，作用和em類(lèi)似，唯一的區(qū)別就是em是相對(duì)父元素的，rem是相對(duì)html根節(jié)點(diǎn)的，即所有使用rem單位的子元素的字體大小都是相對(duì)根節(jié)點(diǎn)的，所以使用rem可以避免使用em帶來(lái)的子元素字體大小逐層復(fù)合的連鎖反應(yīng)。

更多關(guān)于em，rem的知識(shí)參見(jiàn)這篇文章理解web開(kāi)發(fā)中的em單位和rem單位。

*** 分辨率 ***

平時(shí)說(shuō)的手機(jī)屏幕分辨率，也稱(chēng)為物理分辨率或者原生分辨率，通常包括縱向分辨率和橫向分辨率，例如iphone6的物理分辨率是1334 x 750，其中縱向分辨率是1334px，橫向分辨率是750px，表示縱向方向可以顯示1334個(gè)物理像素點(diǎn)，橫向上可以顯示750個(gè)物理像素點(diǎn)，這里描述分辨率使用的px單位，和css中使用的px單位意義不一樣，這里代指物理設(shè)備的像素點(diǎn)。

還有一種分辨率叫做系統(tǒng)分辨率，例如iphone6的系統(tǒng)分辨率是667 x 375，其中高度是667pt，寬度是375pt，這里描述分辨率使用了pt單位，是一種設(shè)備無(wú)關(guān)單位。

屏幕尺寸相同的設(shè)備，物理分辨率越高，ppi也就越大，絕對(duì)單位面積上展示的物理像素?cái)?shù)量越多，展示圖片也就越細(xì)膩。

蘋(píng)果把ppi > 300的屏幕稱(chēng)為視網(wǎng)膜屏,Retina屏。

傳統(tǒng)桌面web頁(yè)面布局通常是定寬布局，但是定寬布局的方式對(duì)移動(dòng)端卻不適用，原因手機(jī)屏幕尺寸大小各異，定寬布局可能在某些手機(jī)上出現(xiàn)橫向滾動(dòng)條，導(dǎo)致閱讀效果比較差。

為了讓手機(jī)有更好的網(wǎng)頁(yè)瀏覽體驗(yàn)，蘋(píng)果引入了viewport，為頁(yè)面提供了一個(gè)虛擬的布局窗口，在這個(gè)虛擬的布局窗口中渲染頁(yè)面，然后系統(tǒng)會(huì)把渲染好的頁(yè)面自動(dòng)縮放到手機(jī)屏幕大小。

雖然viewport還沒(méi)有成為正式的規(guī)范，但是現(xiàn)在絕大部分瀏覽器都支持viewport。

在桌面瀏覽器中，viewport嚴(yán)格等于瀏覽器窗口大小，頁(yè)面渲染時(shí)，頁(yè)面寬度不會(huì)超過(guò)瀏覽器的寬度。

移動(dòng)端屏幕太窄，為了提供更好的頁(yè)面體驗(yàn)，移動(dòng)端提供了兩種viewport： 可視viewport ， 布局viewport 。

可視viewport 就是當(dāng)前屏幕正在展示的區(qū)域，也就是移動(dòng)設(shè)備屏幕的寬度，寬高通過(guò)window.innerWidth和window.innerHeight獲取（存在兼容性問(wèn)題）。

布局viewport ，頁(yè)面布局實(shí)際用到的viewport，通常比可視viewport要寬，寬高通過(guò)document.documentElement.clientWidth和document.documentElement.clientHeight獲取。

移動(dòng)端還有一種viewport概念，可以理解為 理想viewport ，作用就是在理想viewport下，不同移動(dòng)設(shè)備，展示的字體大小接近，并且不需要用戶(hù)縮放就可以展示全部的頁(yè)面內(nèi)容。

理想viewport的寬度默認(rèn)等于可視viewport的寬度，但是對(duì)同一臺(tái)設(shè)備來(lái)說(shuō)，這個(gè)理想viewport的寬度是可以改變的，而可視viewport的寬度是不可變的。

如何使用理想viewport來(lái)布局頁(yè)面呢？只需要設(shè)置viewport的width等于device-width。

viewport的屬性，推薦使用以及支持度較廣泛的屬性只有6個(gè)： width ， height ， initial-scale ， maximum-scale ， minimum-scale ， user-scalable 。

width 設(shè)置viewport布局寬度，內(nèi)核是webkit的瀏覽器默認(rèn)值是980px，取值范圍在200-10000px，也可以取值為設(shè)備寬度device-width（等于橫向設(shè)備無(wú)關(guān)像素?cái)?shù)量）。

height 設(shè)置viewport布局高度，默認(rèn)值依賴(lài)設(shè)備長(zhǎng)寬比以及寬度值，取值范圍在223-10000px，也可以取值為設(shè)備高度device-height。

initial-scale 設(shè)置初始縮放比例，頁(yè)面第一次加載時(shí)的縮放比例。默認(rèn)比例依賴(lài)于顯示密度。在密度低于200 dpi的顯示設(shè)備上，比例為1.0。在密度介于200及300 dpi之間的顯示設(shè)備上，比例為1.5。對(duì)于具有300 dpi以上密度的顯示設(shè)備，比例為密度/150 dpi向下取整的結(jié)果。取值范圍由 maximum-scale 屬性以及 minimum-scale 屬性決定。如果設(shè)置 initial-scale 值為1， width 默認(rèn)是device-width， height 默認(rèn)是device-height

initial-scale 設(shè)置的縮放大小會(huì)改變理想viewport的大小，不會(huì)改變可視viewport的大小，也不會(huì)改變布局viewport的大小，這是某些適配方案依賴(lài)的基本原理，也是解決 1px問(wèn)題的關(guān)鍵。后面分析適配方案時(shí)，動(dòng)態(tài)viewport適配方案就依賴(lài)這個(gè)知識(shí)點(diǎn)。

maximum-scale 允許用戶(hù)縮放到的最大比例，默認(rèn)值是0.5，范圍從0到10.0。

minimum-scale 允許用戶(hù)縮放到的最小比例，默認(rèn)值是5.0，范圍從0到10.0。

user-scalable 用戶(hù)是否可以手動(dòng)縮放，值可以是：yes/true允許用戶(hù)縮放；no/false不允許用戶(hù)縮放。

圖片適配的目的是為了在頁(yè)面中可以高清還原設(shè)計(jì)圖中用到的圖片。

頁(yè)面中用到的圖片是否清晰和展示頁(yè)面的硬件設(shè)備的dpr以及圖片分辨率這兩個(gè)因素有關(guān)，下面會(huì)通過(guò)三個(gè)例子來(lái)說(shuō)明這個(gè)問(wèn)題。

***示例一 ***

例如dpr=2的設(shè)備，1個(gè)設(shè)備無(wú)關(guān)像素(android中的1dp，ios中的1pt)需要4個(gè)設(shè)備物理像素點(diǎn)填充。對(duì)于尺寸為100 x 120 (px)的圖片，如果用 <img> 來(lái)展示，圖片顯示時(shí)會(huì)產(chǎn)生模糊現(xiàn)象。

原因：渲染圖片時(shí)，寬度是100px，所以橫向會(huì)占用100個(gè)設(shè)備無(wú)關(guān)像素，高度是120px,所以縱向會(huì)占用120個(gè)設(shè)備無(wú)關(guān)像素，每個(gè)設(shè)備無(wú)關(guān)像素又需要2x2個(gè)物理像素點(diǎn)來(lái)填充，而圖片在每個(gè)設(shè)備無(wú)關(guān)像素(px)單位上提供的像素點(diǎn)只有1x1個(gè)，這時(shí)，系統(tǒng)通過(guò)一定的算法在這1個(gè)像素點(diǎn)上就近取色，取到4個(gè)顏色(這4種顏色接近但是有一定區(qū)別)之后，當(dāng)成4個(gè)像素點(diǎn)，然后填充到1個(gè)設(shè)備無(wú)關(guān)像素點(diǎn)上，這樣就導(dǎo)致圖片顯示時(shí)模糊，dpr越大，這種方式顯示的圖片越模糊。

示例二

還是dpr=2的設(shè)備，但是準(zhǔn)備了一個(gè)尺寸為200 x 240 (px)的圖片，還是用 <img> 來(lái)展示，這時(shí)顯示的圖片就比較清晰了。

原因：這時(shí)圖片本身可以在一個(gè)設(shè)備無(wú)關(guān)像素單位上提供2x2個(gè)物理像素點(diǎn)，設(shè)備展示圖片時(shí)直接拿圖片提供的像素點(diǎn)來(lái)填充就可以了，不用對(duì)像素點(diǎn)進(jìn)行處理，所以可以比較清晰的顯示圖片。

示例三

還是dpr=2的設(shè)備，這次準(zhǔn)備一個(gè)尺寸400 x 480 (px)的圖片，還是用 <img> 來(lái)展示時(shí)，這種情況展示的圖片缺少銳利度，也影響了圖片的清晰度，但是很難看出來(lái)。

原因：圖片本身在一個(gè)設(shè)備無(wú)關(guān)像素點(diǎn)單位上提供了4x4個(gè)物理像素點(diǎn)，而設(shè)備本身只需要2x2個(gè)物理像素點(diǎn)，所以會(huì)通過(guò)縮減采樣算法，在圖片提供的4x4個(gè)物理像素點(diǎn)中，選取顏色接近的2x2個(gè)物理像素點(diǎn)填充到設(shè)備無(wú)關(guān)像素點(diǎn)上，所以也會(huì)產(chǎn)生一定的色差，這種情況下圖片尺寸越大，這種色差也就越明顯，但是人眼很難區(qū)分這種色差。

下面是我在oppo的一款手機(jī)上的測(cè)試結(jié)果，結(jié)合這張效果圖就可以很好的理解上面的三個(gè)示例了：

圖片適配最佳實(shí)踐

要想高清顯示圖片，如果條件允許(有單獨(dú)的圖片服務(wù)器)最直接的解決辦法，肯定是根據(jù)設(shè)備的dpr，為不同dpr的設(shè)備加載不同倍率大小圖片顯示；沒(méi)這種條件的或者對(duì)用戶(hù)體驗(yàn)沒(méi)有很高要求的，只能選一種折中的方案了，一般情況下只需要提供布局尺寸2倍大小的切圖就可以了，也就是只高清適配dpr=2的設(shè)備，但是dpr為3或者4的設(shè)備展示效果也能接受，不容易看出來(lái)模糊現(xiàn)象。目前主流機(jī)型的dpr也就在2和3之間。

字體適配目標(biāo)主要還是看設(shè)計(jì)要求，主要有兩種：

1.不同屏幕下，字體顯示大小都一樣，即需要等寬顯示字體；

2.不同屏幕下，一行能顯示的字?jǐn)?shù)固定，即需要按比例縮放字體大?。?/p>

開(kāi)始分析之前，先看下這兩種字體適配的示例：

第1種字體適配方案的示例

第2種字體適配方案的示例

下面就來(lái)具體分析下兩種字體適配方案的原理以及優(yōu)劣。

** 第1種字體適配方案原理 **

在開(kāi)始分析這種方式的原理之前，先通過(guò)一張圖理解下px和dp以及絕對(duì)長(zhǎng)度之間關(guān)系。

由上圖可知字體大小只與css單位px有關(guān)，而每個(gè)設(shè)備上px的絕對(duì)寬度又和設(shè)備的絕對(duì)寬度以及絕對(duì)寬度上劃分出的設(shè)備無(wú)關(guān)像素點(diǎn)dp有關(guān)；只要設(shè)備的橫向dp數(shù)量與絕對(duì)寬度的比值(dp/cm)相同，就可以保證px在不同設(shè)備上展示的絕對(duì)寬度是一樣的；如果dp/cm的比值過(guò)大，那么px的絕對(duì)長(zhǎng)度就會(huì)變小，看起來(lái)就會(huì)顯??；如果dp/cm的比值過(guò)小，那么px的絕對(duì)長(zhǎng)度就會(huì)變大，看起來(lái)就會(huì)顯大；一般來(lái)說(shuō)手機(jī)屏幕分辨率越高，相同px值的字體看起來(lái)就會(huì)越小。

iphone5和6的dp/cm比值十分接近，所以12px大小的字體在這兩種手機(jī)上顯示的大小基本一樣，看不出來(lái)區(qū)別，但是iphone6+的dp/cm比值要比iphone5,6的略大，這就導(dǎo)致12px大小的字體在6+上顯示的比5，6上顯示的略小，上面的淘寶對(duì)比圖仔細(xì)分辨可以看出來(lái)。

android的手機(jī)屏幕dp/cm比值在各個(gè)設(shè)備之間也有差異性，并且比較有多樣性。所以同樣12px大小的字體，各個(gè)設(shè)備顯示時(shí)也是有差別的。

這種顯示差別在iphone系列手機(jī)中可以忽略不計(jì)，但是android碎片化比較嚴(yán)重，完美兼容各種機(jī)型沒(méi)有必要，主流機(jī)型中這種顯示差別也可以忽略不計(jì)，所以采用這種方式進(jìn)行字體適配只需要px值設(shè)置成一樣的就可以了。

** 第1種字體適配方案優(yōu)缺點(diǎn)**

優(yōu)點(diǎn)：1.不同設(shè)備中字體大小顯示一致，比較統(tǒng)一；2.大屏手機(jī)可以顯示更多的文字；

缺點(diǎn)：1.由于單個(gè)字體寬度是定死的，所以在有些機(jī)型下可能會(huì)影響頁(yè)面布局；

** 第2種字體適配方案原理 **

在設(shè)計(jì)稿中，計(jì)算出字體大小相對(duì)于基準(zhǔn)字體大?。ɑ鶞?zhǔn)字體大小可以選擇設(shè)計(jì)稿寬度，一般為了計(jì)算方便，會(huì)把設(shè)計(jì)稿寬度/10得到的值作為基準(zhǔn)字體大?。┑谋戎?，然后在不同布局寬度下，先得到基準(zhǔn)字體大小，再根據(jù)上面計(jì)算出來(lái)的比值，就可以計(jì)算出來(lái)不同布局寬度下的字體大小，也就是不同布局寬度下等比例縮放字體。

利用rem的特性，在頁(yè)面的html標(biāo)簽上設(shè)置一個(gè)基準(zhǔn)字體大小，就可以實(shí)現(xiàn)這種方式。

例如，寬是750px的設(shè)計(jì)圖中，字體大小是32px，計(jì)算出基準(zhǔn)字體大小為75px，比值為 32 * 10 / 75 = 0.426667。

如果布局寬度是414px，此時(shí)基準(zhǔn)字體大小變成 414 / 10 = 41.4px，然后設(shè)置<html style="font-size:41.4px">，字體大小是0.426667rem，計(jì)算出來(lái)的字體大小為41.4x0.42667=17.66px。

如果布局寬度變成360px，此時(shí)基準(zhǔn)字體大小變成36px，然后設(shè)置<html style="font-size:36px">，字體大小仍然用0.426667rem表示，計(jì)算出來(lái)的字體大小為36x0.42667=15.36px。

750/32 約等于 414/17.66 約等于 360/15.36，這樣就做到了等比縮放字體了。

** 第2種字體適配方案優(yōu)缺點(diǎn)**

缺點(diǎn)：1.小尺寸設(shè)備屏幕上字體顯示小，大尺寸設(shè)備屏幕字體顯示大，導(dǎo)致字體顯示不一致；2.不能發(fā)揮大屏手機(jī)的優(yōu)勢(shì)（顯示更多的字）；3.字體大小會(huì)出現(xiàn)奇數(shù)或者小數(shù)點(diǎn)大小的值，某些字體不支持這些值，渲染時(shí)增加計(jì)算量；

優(yōu)點(diǎn)：1.適配簡(jiǎn)單，不同設(shè)備不會(huì)影響頁(yè)面布局，可以和設(shè)計(jì)稿布局保持一致；

布局中對(duì)寬度的適配，也是采用rem來(lái)實(shí)現(xiàn)，和上面第2種字體大小適配方式中的原理類(lèi)似，也是計(jì)算出一個(gè)比例值，然后不同布局寬度中等比縮放，這里偷下懶，不在贅述。

目前的解決方案有兩類(lèi)

第一類(lèi)就是js動(dòng)態(tài)生成viewport標(biāo)簽，標(biāo)簽中的initial-scale值根據(jù)設(shè)備的dpr計(jì)算，不同dpr設(shè)備的viewport值不同。

第二類(lèi)就是js不操作viewport，每個(gè)設(shè)備都使用理想viewport來(lái)布局。

** 動(dòng)態(tài)viewport解決方案分析 **

這里分析兩個(gè)動(dòng)態(tài)viewport解決方案：

1.手機(jī)淘寶的flexible方案；

2.hotcss方案；

手機(jī)淘寶的flexible方案，特點(diǎn)：

1.僅針對(duì)iphone生成動(dòng)態(tài)viewport，因?yàn)槟壳癷phone的dpr只有1，2，3三種，android的dpr很有多種，不具有一致性；

2.字體大小不用rem做縮放處理，仍然使用px單位，設(shè)置不同dpr下對(duì)應(yīng)的字體大小；

3.寬度利用rem等比縮放；

4.允許強(qiáng)制定義dpr;

使用時(shí)頁(yè)面頭部需要引入 flexible.js .

hotcss方案，特點(diǎn)：

1.不區(qū)分iphone和android，dpr只取三種1,2,3，android的dpr做近似處理；

2.寬度以及字體利用rem等比縮放；

3.允許強(qiáng)制定義dpr;

使用時(shí)頁(yè)面頭部需要引入 hotcss.js

動(dòng)態(tài)viewport方案之所以會(huì)稱(chēng)為動(dòng)態(tài)viewport是因?yàn)?，這個(gè)適配過(guò)程會(huì)根據(jù)系統(tǒng)dpr值設(shè)置initial-scale屬性的大小，大小等于1/dpr。

** 靜態(tài)viewport解決方案分析 **

利用rem特性，先根據(jù)標(biāo)注圖算出各元素相對(duì)于設(shè)計(jì)稿寬度的比值，這個(gè)比值就作為rem值，然后頁(yè)面布局時(shí)就用算出的rem值表示，并且在html根元素設(shè)置當(dāng)前布局頁(yè)面寬度作為基準(zhǔn)。更rem值計(jì)算具體的解釋可以參考這篇文章使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配。通過(guò)這種方式設(shè)置標(biāo)簽元素的寬高，位置以及字體大小，這樣利用rem特性就可以在不同手機(jī)屏幕上實(shí)現(xiàn)等比縮放。

參考資料

https://github.com/amfe/article/issues/17

http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html

二、H5+CSS3移動(dòng)端適配技術(shù)

近期因工作需求，做了一個(gè)Vue APP，過(guò)程中遇到了曾今經(jīng)常聽(tīng)說(shuō)，但從未真正接觸過(guò)的移動(dòng)端適配問(wèn)題，中間遇到了很多挫折，經(jīng)過(guò)了5天吧，這個(gè)小app經(jīng)過(guò)來(lái)回重寫(xiě)樣式好幾遍，終于找到了門(mén)道，應(yīng)該算是正路吧，我身邊也沒(méi)有真正做h5 app的伙伴，靠著自己百度、揣摩，外加朋友的幫助，學(xué)會(huì)了適配的方案。

解釋

vw：屏幕可視寬度百分比

vh：屏幕可視高度百分比

vmin：屏幕可視寬度和高度中較小的那個(gè)，用這個(gè)單位，可以讓字體在移動(dòng)設(shè)備無(wú)論橫屏還是豎屏都保持大小不變

vmax：屏幕可視寬度和高度中較大的那個(gè)，用處同上vmin

%：相對(duì)于父級(jí)元素的百分比尺寸

由于設(shè)備的高度會(huì)在不同的情況下受到影響，所以我們主要使用vw去控制各個(gè)元素的尺寸，因?yàn)樵O(shè)備的可視寬度正常情況下是不會(huì)有什么東東占用的，我沒(méi)遇到過(guò)，所以設(shè)備的寬度就是可視寬度，那么寬度不變，我們使用vw去控制元素尺寸的時(shí)候，也就不會(huì)受到任何影響了，無(wú)論在什么情況下，都能保證元素的位置和尺寸不變了

而我們?cè)谶m當(dāng)?shù)那闆r下需要使用%，因?yàn)関w、vh等都是設(shè)備的整個(gè)屏幕的可視寬高百分比，而有時(shí)候我們要的百分比是相對(duì)父級(jí)元素的，所以不要隨便亂用，要想好再用

下面展示下把web app打包成apk全屏應(yīng)用和在瀏覽器中瀏覽的效果

px 轉(zhuǎn) rem，還有寫(xiě)各種屏幕的不同樣式的方案是過(guò)去的方案，當(dāng)前主流使用CSS3的新特性單位，才最佳

三、Vant移動(dòng)端rem適配方案

1、Vant 中的樣式默認(rèn)使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個(gè)工具：

[ lib-flexible 用于設(shè)置 rem 基準(zhǔn)值，設(shè)置根字體的大小

postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem

2、使用 lib-flexible 動(dòng)態(tài)設(shè)置 REM 基準(zhǔn)值

html 標(biāo)簽的字體大小

2.1 安裝

// yarn add amfe-flexible

cnpmiamfe-flexible-S

2.2 然后在 main.js 中加載執(zhí)行該模塊

import 'amfe-flexible'

2.3 最后測(cè)試：在瀏覽器中切換不同的手機(jī)設(shè)備尺寸，觀察 html 標(biāo)簽 font-size 的變化

. 例如在 iPhone 6/7/8 設(shè)備下，html 標(biāo)簽字體大小為 37.5 px

. 例如在 iPhone 6/7/8 Plus 設(shè)備下，html 標(biāo)簽字體大小為 41.4 px

3、使用 postcss-pxtorem 將 px 轉(zhuǎn)為 rem

3.1 安裝

// yarn add -D postcss-pxtorem

// -D 是 --save-dev 的簡(jiǎn)寫(xiě)

cnpminstallpostcss-pxtorem-D

3.2 然后在項(xiàng)目根目錄中創(chuàng)建 .postcssrc.js 文件

module.exports={

plugins: {

'autoprefixer': {

browsers: ['Android >= 4.0','iOS >= 8']

'postcss-pxtorem': {

rootValue:37.5,

propList: ['*']

}

3.3 配置完畢，重新啟動(dòng)服務(wù)

npmrunserve

最后測(cè)試：刷新瀏覽器頁(yè)面，審查元素的樣式查看是否已將 px 轉(zhuǎn)換為 rem

轉(zhuǎn)換之前的樣式

4、注意事項(xiàng)：

該插件不能轉(zhuǎn)換行內(nèi)樣式中的 px ，例如 <div style="width: 200px;"></div>

5、postcss-pxtorem 插件的配置

rootValue：表示根元素字體大小，它會(huì)根據(jù)根元素大小進(jìn)行單位轉(zhuǎn)換

propList 用來(lái)設(shè)定可以從 px 轉(zhuǎn)為 rem 的屬性

例如 * 就是所有屬性都要轉(zhuǎn)換，width 就是僅轉(zhuǎn)換 width 屬性

rootValue 應(yīng)該如何設(shè)置呢？

如果你使用的是基于lib-flexable的REM適配方案，則應(yīng)該設(shè)置為你的設(shè)計(jì)稿的十分之一。

例如設(shè)計(jì)稿是750寬，則應(yīng)該設(shè)置為75。

大多數(shù)設(shè)計(jì)稿的原型都是以 iphone6 為原型，iphone6 設(shè)備的寬是 750，我們的設(shè)計(jì)稿也是這樣。

但是 Vant 建議設(shè)置為 37.5，為什么呢？

因?yàn)閂ant是基于375寫(xiě)的，所以如果你設(shè)置為75的話(huà)，Vant的樣式就小了一半。

所以如果設(shè)置為 37.5 的話(huà)，Vant 的樣式是沒(méi)有問(wèn)題的，但是我們?cè)跍y(cè)量設(shè)計(jì)稿的時(shí)候都必須除2才能使用，否則就會(huì)變得很大。

這樣做其實(shí)也沒(méi)有問(wèn)題，但是有沒(méi)有更好的辦法呢？我就想實(shí)現(xiàn)測(cè)量多少寫(xiě)多少（不用換算）。于是聰明的你就想，可以不可以這樣來(lái)做？

如果是 Vant 的樣式，就把 rootValue 設(shè)置為 37.5 來(lái)轉(zhuǎn)換

如果是我們的樣式，就按照 75 的 rootValue 來(lái)轉(zhuǎn)換

通過(guò) 查閱文檔我們可以看到 rootValue 支持兩種參數(shù)類(lèi)型

數(shù)字：固定值

函數(shù)：動(dòng)態(tài)計(jì)算返回

postcss-pxtorem 處理每個(gè) CSS 文件的時(shí)候都會(huì)來(lái)調(diào)用這個(gè)函數(shù)

它會(huì)把被處理的 CSS 文件相關(guān)的信息通過(guò)參數(shù)傳遞給該函數(shù)

修改配置如下

/**

* PostCSS 配置文件

module.exports={

// 配置要使用的 PostCSS 插件

plugins: {

// 配置使用 autoprefixer 插件

// 作用：生成瀏覽器 CSS 樣式規(guī)則前綴

// VueCLI 內(nèi)部已經(jīng)配置了 autoprefixer 插件

// 所以又配置了一次，所以產(chǎn)生沖突了

// 'autoprefixer': { // autoprefixer 插件的配置

// // 配置要兼容到的環(huán)境信息

// browsers: ['Android >= 4.0', 'iOS >= 8']

// },

// 配置使用 postcss-pxtorem 插件

// 作用：把 px 轉(zhuǎn)為 rem

'postcss-pxtorem': {

rootValue({file}) {

returnfile.indexOf('vant')!==-1?37.5:75

propList: ['*']

}

其他

[Android]

>=4.0

[iOS]

>=8

具體語(yǔ)法請(qǐng) 參考這里

5. 配置完畢，把服務(wù)重啟一下，最后測(cè)試，very good

四、移動(dòng)端，PC端是怎么做適配的？

px：像素

em：一個(gè) M 的寬度（面試：一個(gè)字的寬度）

rem：root em 根元素（ <html> ）的 font-size //oppo個(gè)別機(jī)型不適用

vh：view height，視口高度 100vh === 視口高度

vw：view width，視口寬度 100vw === 視口寬度

瀏覽器默認(rèn) font-size:16px;

Chrome瀏覽器默認(rèn)最小字號(hào)為12px：font-size:12px;

所以一般情況下，rem 的font-size不要小于12px;

rem 就是 <html> 元素的 font-size，默認(rèn)為 16px;(瀏覽器默認(rèn)font-size)

rem和em 的區(qū)別：

1.meta viewport

2.媒體查詢(xún)

更具查詢(xún)結(jié)果選擇不同的css樣式,設(shè)置屏幕最大寬度，如果頁(yè)面范圍在這個(gè)寬度內(nèi)就可以顯示對(duì)應(yīng)的CSS，以最大500為例

<style>

@media (max-width: 500px) {

......

}

</style>

3.動(dòng)態(tài) rem方案

一切單位以屏幕寬度為標(biāo)準(zhǔn)，就能完美還原設(shè)計(jì)稿。

動(dòng)態(tài)REM思路：動(dòng)態(tài)rem 采用整體縮放的思想，在頁(yè)面渲染之前，使用JS獲取設(shè)備寬度并設(shè)置rem(1rem == html font-size == viewport width)，之后的布局單位全部使用rem來(lái)實(shí)現(xiàn)整體縮放。

在使用動(dòng)態(tài) rem 布局的移動(dòng)端頁(yè)面中，很小的寬度如border-width 依然使用px，因?yàn)榧词故褂胷em，當(dāng)rem小于1px 時(shí)，依然會(huì)被瀏覽器當(dāng)做1px 使用。

以上就是關(guān)于移動(dòng)端適配方案阮一峰相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。