脚手架为 vue-cli 2.9.6 时 安装插件 amfe-flexible 执行命令
npm i amfe-flexible
安装成功后 在main.js 文件中导入
import 'amfe-flexible'
成功标志 打开控制器查看元素 随着浏览器变化， html 改变自身发font-size的值
安装 px2rem-loader 执行命令
npm i px2rem-loader
在build 下边的 utils.js 进行配置 如下
exports.cssLoaders = function(options) {
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
remUnit * 10 等于设计稿的宽度
}
}
// px2rem-loader 放在数组中（保证 loaders 能取到就好）
function generateLoaders(loader, loaderOptions){
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
}
}
vue-cli 3.x
先 npm i amfe-flexible
然后
在main.js 里边导入
import 'amfe-flexible'
解决：随着浏览器变化，改变自身字体大小
成功标志
<html style="font-size: 91.2px;> 会随浏览器切换不通机型来改变 font-size 值的大小
npm i postcss-pxtorem@5.1.1
新建vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 37.5, // vant官方使用的是37.5
selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
propList: ['*']
})
]
}
}
}
}
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
