解决方案主要是依赖淘宝的一个js模块(lib-flexible)和 一个webpack的loader(px2rem-loader),最终实现在开发时,长度单位直接写px可自动转成rem(文字大小则不转),且在其他尺寸的手机屏幕都可以自适应。
第1步,在项目根目录的 index.html 中添加如下 meta
第2步,安装 lib-flexible 模块,命令行 npm install lib-flexible --save-dev
第3步,在main.js文件里引入该模块,代码如下:
import 'lib-flexible'
第4步,安装 px2rem-loader
,命令行 npm install px2rem-loader
--save-dev
第5步,打开build/utils.js文件,编辑代码如下:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //设计稿的宽度 除以 10,一般设计稿的宽度都为750px
}
}
...
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
...
第6步,启动项目,命令行 npm run dev
到这里,自适应功能已经没问题,接着在代码中的长度单位可以直接写 px ,编译之后自动会被转成 rem。
注意:文字大小一般不用转rem,还是维持原来的 px,那么需要在最后加上 斜杆星号no星号斜杆,这样就不会被编译成rem,例如: