前端移动端适配
移动端适配
安装lib-fiexible 引入 lib-flexible
安装px2rem-loader
配置px2rem-loader
第一种情况：vue-lic 2.x
在 build/utils.js 中，找到 exports.cssLoaders，作出如下修改：
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75 // 以设计稿 750 为例， 750 / 10 = 75
}
}
2.继续找到 generateLoaders 中的 loaders 配置，作出如下配置：
// 注 释 掉 这 一 行 // const loaders = options.usePostCSS ? [cssLoader,
postcssLoader] : [cssLoader]// 修改为 const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
第二种情况 vue-lin 3.x
在根目录创建新文件vue.config.js. 配置如下：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
// 以设计稿 750 为例， 750 / 10 = 75
remUnit: 75
}),
]
}
}
},
}
第三种情况：如果屏幕尺寸3840X2160 在remUnit改为384 打开./node_modules/lib-flexible/flexible.js，找到如下片段源码：知道 function refreshRem 这个函数改为如下：
function refreshRem(){
var width = docEl.getBoundingClientRect().width
if (width / dpr < 1980) {
width = 1980 * dpr;
} else if (width / dpr > 5760) {
width = 5760 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
配置完成 重启
这是rem布局
