webpack的移动端适配方案小结
在移动端开发的过程中，一个最常见的问题就是适配不同的屏幕宽度。目前比较常见的适配方案有rem和vw，它们都是css中的相对单位。
rem
W3C对rem的定义是 font-size of the root element，它是一个只相对于浏览器的根元素（HTML元素）的font-size的来确定的单位，也就是说对于不同宽度的机型，我们只需要计算出对应的根元素的字体大小，用同样的css代码可以实现等比适配。考虑最简单的情况：
html代码片段
//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度 <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">
js代码片段
//根据文档宽度计算根元素的字体大小,以文档宽度的1/10为例，如果屏幕宽度为375，那么根元素font-size就为37.5px var w = document.documentElement.clientWidth; document.documentElement.style.fontSize = w / 10 + 'px';
css代码片段
//此时如果在css中写
.div{
width: 2rem;
}
//那么这个div的宽度就是75px，同理如果屏幕宽度为360，那么div就宽72px。
//日常开发中，比较常见的设计稿是750px，在设计稿中一个区域的高度为30px的话，
//在css中写成 height：0.4rem（30/75），就能完成等比缩放
而实际开发中，我们通常在webpack构建的时候使用插件来实现rem适配：postcss-pxtorem 和 lib-flexible。
安装：npm i postcss-pxtorem --D 和 npm i amfe-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
}
]
},
}
在项目根目录新建.postcssrc.js文件，在其中写入postcss-pxtorem插件配置
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 75, //750的设计稿
propList: ['*']
}
}
}
在entry指定的入口js文件（"./src/index.js"）中引入lib-flexible
import 'amfe-flexible'
这样，就可以在css中直接写设计稿中的绝对像素值，比如一个div#test在750设计稿中的宽度为200px，就可以直接这样写，而不用换算了。
#test{
width: 200px
}
vw
另外一种方案是使用vw：1% of viewport's width, 它是相对浏览器可视区域宽度的单位。
//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度 <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">
在移动端，如果配置了width = device-width，那么100vw就是屏幕宽度。
使用vw布局，就不需要再像rem那样，用js中去动态设置根元素的font-size，而是直接相对于屏幕宽度。比如750的设计稿中，一个div的宽度是200px，那么就可以写：width: 200 / 750 * 100 vw
而使用webpack，我们可以用 postcss-px-to-viewport 插件来实现：
安装：npm i postcss-px-to-viewport --D
如上rem那样在webpack.config.js配置 postcss-loader。
在项目根目录新建.postcssrc.js文件，在其中写入 postcss-px-to-viewport 插件配置
module.exports = {
"plugins": {
'postcss-px-to-viewport': {
viewportWidth: 750 //750的设计稿
}
}
}
这样也就可以在css中直接写设计稿中的绝对像素值，示例同上rem的示例。
适配第三方UI框架
有时候我们在移动端会使用其他组件库，引用像vant、mint-ui这样的第三方UI框架，因为第三方框架用的是px单位，基于375px的设计稿，如果我们的项目是750px的设计稿，就不能用同一个viewportWidth进行适配。
此时可以在.postcssrc.js中如下配置（以vw为例，rem也类似）：
const path = require('path')
module.exports = ({file}) => {
//如果使用vant UI框架
const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
return {
"plugins": {
"postcss-px-to-viewport": {
viewportWidth: width,
}
}
}
}
结语
rem和vw都是常用的移动端适配解决方案。两者的区别，首先是在兼容性上，rem可以兼容更老的浏览器版本，参考caniuse网站 caniuse.com/ ；其次是rem需要通过js计算根元素的字体大小，vm是纯css实现。
上一篇：JavaScript使ifram跨域相互访问及与PHP通信的实例
栏 目：JavaScript代码
本文标题：webpack的移动端适配方案小结
本文地址：http://www.codeinn.net/misctech/183259.html
