HOME 首頁
SERVICE 服務產(chǎn)品
XINMEITI 新媒體代運營
CASE 服務案例
NEWS 熱點資訊
ABOUT 關(guān)于我們
CONTACT 聯(lián)系我們
創(chuàng)意嶺
讓品牌有溫度、有情感
專注品牌策劃15年

    移動端適配方案阮一峰(移動端適配布局)

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

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

    開始之前先推薦一個非常厲害的Ai人工智能工具,一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

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

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

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

    本文目錄:

    移動端適配方案阮一峰(移動端適配布局)

    一、移動端H5頁面適配問題研究

    剛開始做移動端web開發(fā)的同學應該都碰到過頁面適配問題,為什么我在開發(fā)手機上調(diào)試好的頁面在其他手機會有這樣或那樣的樣式問題? viewport 我也設(shè)置了,為什么還是顯示不正常?難道我要為每種手機屏幕寫媒體查詢,有沒有簡單的方式,可以不用關(guān)注手機屏幕的差異性呢?

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

    由于本文內(nèi)容較長,下面先給出文章的提綱:

    1.1理解移動端單位

      1.2理解viewport

    2.1圖片高清適配

      2.2字體大小適配

      2.3布局寬度適配

    ---這里是分隔符,正文開始---

    不知道正在看文章的你對上面列出來的這些單位是不是很熟悉,如果是的話,就可以跳過了。

    理解這些單位的用法以及區(qū)別,對理解移動端頁面適配有很大的幫助。為了讓你對上面的單位有個大體的認知,這里把上面的單位分成了三類:

    下面分別對每個單位展開分析:

    *** dpi / ppi ***

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

    ppi , pixel per inch ,每英寸的像素數(shù),像素密度;表示圖像或者顯示器單位面積上像素數(shù)量。

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

    ppi的計算方法:

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

    android對移動設(shè)備不同屏幕分辨率的分類。

    *** pt,pc,sp ***

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

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

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

    *** dip / dp ***

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

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

    android設(shè)備中,規(guī)定160ppi的屏幕,1dp = 1px;320ppi的屏幕,1dp = 2px,所以android設(shè)備中dp的計算方法:dp = px * (ppi / 160),這里的px是指設(shè)備的物理像素點。

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

    *** px ***

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

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

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

    *** dpr ***

    ** dpr ** ,device pixel ratio, 橫向或者縱向設(shè)備物理像素數(shù)量與設(shè)備獨立像素數(shù)量的比值,瀏覽器中可以通過window.devicePixelRatio獲取(存在兼容性問題)。

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

    ios設(shè)備中iphone3的dpr為1;iphone4,5,6,7的dpr為2;iphone6+,7+的dpr為3。iphone6+和iphone7+實際計算出來的dpr應該時2.6左右,但是官方還是建議dpr為3,這是因為ios系統(tǒng)利用了一種“縮減像素采樣”算法,自動縮減到2.6。

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

    *** em,rem ***

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

    ** rem ** 相對單位,root em,CSS3新增的單位,作用和em類似,唯一的區(qū)別就是em是相對父元素的,rem是相對html根節(jié)點的,即所有使用rem單位的子元素的字體大小都是相對根節(jié)點的,所以使用rem可以避免使用em帶來的子元素字體大小逐層復合的連鎖反應。

    更多關(guān)于em,rem的知識參見這篇文章 理解web開發(fā)中的em單位和rem單位 。

    *** 分辨率 ***

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

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

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

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

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

    為了讓手機有更好的網(wǎng)頁瀏覽體驗,蘋果引入了viewport,為頁面提供了一個虛擬的布局窗口,在這個虛擬的布局窗口中渲染頁面,然后系統(tǒng)會把渲染好的頁面自動縮放到手機屏幕大小。

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

    在桌面瀏覽器中,viewport嚴格等于瀏覽器窗口大小,頁面渲染時,頁面寬度不會超過瀏覽器的寬度。

    移動端屏幕太窄,為了提供更好的頁面體驗,移動端提供了兩種viewport: 可視viewport , 布局viewport 。

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

    布局viewport ,頁面布局實際用到的viewport,通常比可視viewport要寬,寬高通過document.documentElement.clientWidth和document.documentElement.clientHeight獲取。

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

    理想viewport的寬度默認等于可視viewport的寬度,但是對同一臺設(shè)備來說,這個理想viewport的寬度是可以改變的,而可視viewport的寬度是不可變的。

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

    viewport的屬性,推薦使用以及支持度較廣泛的屬性只有6個: width , height , initial-scale , maximum-scale , minimum-scale , user-scalable 。

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

    height 設(shè)置viewport布局高度,默認值依賴設(shè)備長寬比以及寬度值,取值范圍在223-10000px,也可以取值為設(shè)備高度device-height。

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

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

    maximum-scale 允許用戶縮放到的最大比例,默認值是0.5,范圍從0到10.0。

    minimum-scale 允許用戶縮放到的最小比例,默認值是5.0,范圍從0到10.0。

    user-scalable 用戶是否可以手動縮放,值可以是:yes/true允許用戶縮放;no/false不允許用戶縮放。

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

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

    ***示例一 ***

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

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

    示例二

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

    原因:這時圖片本身可以在一個設(shè)備無關(guān)像素單位上提供2x2個物理像素點,設(shè)備展示圖片時直接拿圖片提供的像素點來填充就可以了,不用對像素點進行處理,所以可以比較清晰的顯示圖片。

    示例三

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

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

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

    圖片適配最佳實踐

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

    字體適配目標主要還是看設(shè)計要求,主要有兩種:

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

    2.不同屏幕下,一行能顯示的字數(shù)固定,即需要按比例縮放字體大??;

    開始分析之前,先看下這兩種字體適配的示例:

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

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

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

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

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

    由上圖可知字體大小只與css單位px有關(guān),而每個設(shè)備上px的絕對寬度又和設(shè)備的絕對寬度以及絕對寬度上劃分出的設(shè)備無關(guān)像素點dp有關(guān);只要設(shè)備的橫向dp數(shù)量與絕對寬度的比值(dp/cm)相同,就可以保證px在不同設(shè)備上展示的絕對寬度是一樣的;如果dp/cm的比值過大,那么px的絕對長度就會變小,看起來就會顯?。蝗绻鹍p/cm的比值過小,那么px的絕對長度就會變大,看起來就會顯大;一般來說手機屏幕分辨率越高,相同px值的字體看起來就會越小。

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

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

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

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

    優(yōu)點:1.不同設(shè)備中字體大小顯示一致,比較統(tǒng)一;2.大屏手機可以顯示更多的文字;

    缺點:1.由于單個字體寬度是定死的,所以在有些機型下可能會影響頁面布局;

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

    在設(shè)計稿中,計算出字體大小相對于基準字體大?。ɑ鶞首煮w大小可以選擇設(shè)計稿寬度,一般為了計算方便,會把設(shè)計稿寬度/10得到的值作為基準字體大?。┑谋戎担缓笤诓煌季謱挾认?,先得到基準字體大小,再根據(jù)上面計算出來的比值,就可以計算出來不同布局寬度下的字體大小,也就是不同布局寬度下等比例縮放字體。

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

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

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

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

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

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

    缺點:1.小尺寸設(shè)備屏幕上字體顯示小,大尺寸設(shè)備屏幕字體顯示大,導致字體顯示不一致;2.不能發(fā)揮大屏手機的優(yōu)勢(顯示更多的字);3.字體大小會出現(xiàn)奇數(shù)或者小數(shù)點大小的值,某些字體不支持這些值,渲染時增加計算量;

    優(yōu)點:1.適配簡單,不同設(shè)備不會影響頁面布局,可以和設(shè)計稿布局保持一致;

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

    目前的解決方案有兩類

    第一類就是js動態(tài)生成viewport標簽,標簽中的initial-scale值根據(jù)設(shè)備的dpr計算,不同dpr設(shè)備的viewport值不同。

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

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

    這里分析兩個動態(tài)viewport解決方案:

    1.手機淘寶的flexible方案;

    2.hotcss方案;

    手機淘寶的flexible方案 ,特點:

    1.僅針對iphone生成動態(tài)viewport,因為目前iphone的dpr只有1,2,3三種,android的dpr很有多種,不具有一致性;

    2.字體大小不用rem做縮放處理,仍然使用px單位,設(shè)置不同dpr下對應的字體大小;

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

    4.允許強制定義dpr;

    使用時頁面頭部需要引入 flexible.js .

    hotcss方案 ,特點:

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

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

    3.允許強制定義dpr;

    使用時頁面頭部需要引入 hotcss.js

    動態(tài)viewport方案之所以會稱為動態(tài)viewport是因為,這個適配過程會根據(jù)系統(tǒng)dpr值設(shè)置initial-scale屬性的大小,大小等于1/dpr。

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

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

    參考資料

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

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

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

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

    解釋

    vw:屏幕可視寬度百分比

    vh:屏幕可視高度百分比

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

    vmax:屏幕可視寬度和高度中較大的那個,用處同上vmin

    %:相對于父級元素的百分比尺寸

    由于設(shè)備的高度會在不同的情況下受到影響,所以我們主要使用vw去控制各個元素的尺寸,因為設(shè)備的可視寬度正常情況下是不會有什么東東占用的,我沒遇到過,所以設(shè)備的寬度就是可視寬度,那么寬度不變,我們使用vw去控制元素尺寸的時候,也就不會受到任何影響了,無論在什么情況下,都能保證元素的位置和尺寸不變了

    而我們在適當?shù)那闆r下需要使用%,因為vw、vh等都是設(shè)備的整個屏幕的可視寬高百分比,而有時候我們要的百分比是相對父級元素的,所以不要隨便亂用,要想好再用

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

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

    三、Vant移動端rem適配方案

    1、Vant 中的樣式默認使用 px 作為單位,如果需要使用 rem 單位,推薦使用以下兩個工具 :

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

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

    2、使用 lib-flexible 動態(tài)設(shè)置 REM 基準值

    html 標簽的字體大小

    2.1 安裝

    // yarn add amfe-flexible

    ​cnpmiamfe-flexible-S

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

    import    'amfe-flexible'

    2.3 最后測試:在瀏覽器中切換不同的手機設(shè)備尺寸,觀察 html 標簽 font-size 的變化

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

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

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

    3.1  安裝

    // yarn add -D postcss-pxtorem

    // -D 是 --save-dev 的簡寫

    cnpminstallpostcss-pxtorem-D

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

    module.exports={

    plugins: {

    'autoprefixer': {

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

       },

    'postcss-pxtorem': {

    rootValue:37.5,

    propList: ['*']

       }

      }

    }

    3.3  配置完畢,重新啟動服務

    npmrunserve

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

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

    4、注意事項:

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

    5、postcss-pxtorem 插件的配置

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

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

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

    rootValue 應該如何設(shè)置呢?

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

    例如設(shè)計稿是750寬,則應該設(shè)置為75。

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

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

    因為Vant是基于375寫的,所以如果你設(shè)置為75的話,Vant的樣式就小了一半。

    所以如果設(shè)置為 37.5 的話,Vant 的樣式是沒有問題的,但是我們在測量設(shè)計稿的時候都必須除2才能使用,否則就會變得很大。

    這樣做其實也沒有問題,但是有沒有更好的辦法呢?我就想實現(xiàn)測量多少寫多少(不用換算)。于是聰明的你就想,可以不可以這樣來做?

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

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

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

    數(shù)字:固定值

    函數(shù):動態(tài)計算返回

    postcss-pxtorem 處理每個 CSS 文件的時候都會來調(diào)用這個函數(shù)

    它會把被處理的 CSS 文件相關(guān)的信息通過參數(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

    ​具體語法請 參考這里

    5.  配置完畢,把服務重啟一下,最后測試,very good

    四、移動端,PC端是怎么做適配的?

    px:像素

    em:一個 M 的寬度(面試:一個字的寬度)

    rem:root em 根元素( <html> )的 font-size //oppo個別機型不適用

    vh:view height,視口高度 100vh === 視口高度

    vw:view width,視口寬度 100vw === 視口寬度

    瀏覽器默認 font-size:16px;

    Chrome瀏覽器默認最小字號為12px:font-size:12px;

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

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

    rem和em 的區(qū)別:

    1.meta viewport

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

    2.媒體查詢

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

    <style>

    @media (max-width: 500px) {

    ......

    }

    </style>

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

    一切單位以屏幕寬度為標準,就能完美還原設(shè)計稿。

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

    在使用動態(tài) rem 布局的移動端頁面中,很小的寬度如border-width 依然使用px,因為即使使用rem,當rem小于1px 時,依然會被瀏覽器當做1px 使用。

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


    推薦閱讀:

    移動互聯(lián)網(wǎng)媒體營銷(移動互聯(lián)網(wǎng)媒體營銷抖音)

    中國移動杭州研發(fā)中心官網(wǎng)(中國移動杭州研發(fā)中心官網(wǎng)首頁)

    杭州移動企業(yè)上云產(chǎn)品手冊(移動企業(yè)上云什么意思)

    杭州賣旗袍的地方在哪(杭州賣旗袍的地方在哪兒)

    海報屬于什么設(shè)計(海報屬于什么設(shè)計領(lǐng)域的產(chǎn)品)