第webpack的移動(dòng)端適配方案小結(jié)目錄rem

vw

適配第三方UI框架

結(jié)語

在移動(dòng)端開發(fā)的過程中，一個(gè)最常見的問題就是適配不同的屏幕寬度。目前比較常見的適配方案有rem和vw，它們都是css中的相對單位。

rem

W3C對rem的定義是font-sizeoftherootelement，它是一個(gè)只相對于瀏覽器的根元素（HTML元素）的font-size的來確定的單位，也就是說對于不同寬度的機(jī)型，我們只需要計(jì)算出對應(yīng)的根元素的字體大小，用同樣的css代碼可以實(shí)現(xiàn)等比適配。考慮最簡單的情況：

html代碼片段

//移動(dòng)頁面中不可少的meta,將設(shè)備屏幕的寬度設(shè)置成將文檔寬度

metaname="viewport"content="width=device-width,initial-scale=1，user-scalable=0"

js代碼片段

//根據(jù)文檔寬度計(jì)算根元素的字體大小,以文檔寬度的1/10為例，如果屏幕寬度為375，那么根元素font-size就為37.5px

varw=document.documentElement.clientWidth;

document.documentElement.style.fontSize=w/10+'px';

css代碼片段

//此時(shí)如果在css中寫

.div{

width:2rem;

//那么這個(gè)div的寬度就是75px，同理如果屏幕寬度為360，那么div就寬72px。

//日常開發(fā)中，比較常見的設(shè)計(jì)稿是750px，在設(shè)計(jì)稿中一個(gè)區(qū)域的高度為30px的話，

//在css中寫成height：0.4rem（30/75），就能完成等比縮放

而實(shí)際開發(fā)中，我們通常在webpack構(gòu)建的時(shí)候使用插件來實(shí)現(xiàn)rem適配：postcss-pxtorem和lib-flexible。

安裝：npmipostcss-pxtorem--D和npmiamfe-flexible--S

在webpack.config.js中配置postcss-loader

module.exports={

entry:"./src/index.js",

output:{

path:path.join(__dirname,"/dist"),

filename:"bundle.js"

module:{

rules:[

test:/\.css$/,

use:['style-loader','css-loader','postcss-loader']//配置postcss-loader

在項(xiàng)目根目錄新建.postcssrc.js文件，在其中寫入postcss-pxtorem插件配置

module.exports={

"plugins":{

"postcss-pxtorem":{

rootValue:75,//750的設(shè)計(jì)稿

propList:['*']

在entry指定的入口js文件（"./src/index.js"）中引入lib-flexible

import'amfe-flexible'

這樣，就可以在css中直接寫設(shè)計(jì)稿中的絕對像素值，比如一個(gè)div#test在750設(shè)計(jì)稿中的寬度為200px，就可以直接這樣寫，而不用換算了。

#test{

width:200px

vw

另外一種方案是使用vw：1%ofviewport'swidth,它是相對瀏覽器可視區(qū)域?qū)挾鹊膯挝弧?/p>

//移動(dòng)頁面中不可少的meta,將設(shè)備屏幕的寬度設(shè)置成將文檔寬度

metaname="viewport"content="width=device-width,initial-scale=1，user-scalable=0"

在移動(dòng)端，如果配置了width=device-width，那么100vw就是屏幕寬度。

使用vw布局，就不需要再像rem那樣，用js中去動(dòng)態(tài)設(shè)置根元素的font-size，而是直接相對于屏幕寬度。比如750的設(shè)計(jì)稿中，一個(gè)div的寬度是200px，那么就可以寫：width:200/750*100vw

而使用webpack，我們可以用postcss-px-to-viewport插件來實(shí)現(xiàn)：

安裝：npmipostcss-px-to-viewport--D

如上rem那樣在webpack.config.js配置postcss-loader。

在項(xiàng)目根目錄新建.postcssrc.js文件，在其中寫入postcss-px-to-viewport插件配置

module.exports={

"plugins":{

'postcss-px-to-viewport':{

viewportWidth:750//750的設(shè)計(jì)稿

這樣也就可以在css中直接寫設(shè)計(jì)稿中的絕對像素值，示例同上rem的示例。

適配第三方UI框架

有時(shí)候我們在移動(dòng)端會(huì)使用其他組件庫，引用像vant、mint-ui這樣的第三方UI框架，因?yàn)榈谌娇蚣苡玫氖莗x單位，基于375px的設(shè)計(jì)稿，如果我們的項(xiàng)目是750px的設(shè)計(jì)稿，就不能用同一個(gè)viewportWidth進(jìn)行適配。

此時(shí)可以在.postcssrc.js中如下配置（以vw為例，rem也類似）：

constpath=require('path')

module.exports=({file})={

//如果使用vantUI框架

constwidth=file.dirname.includes(path.join('node_modules','vant'))375:750;

return{

"plugins":{

"postcss-px-to-viewport":{