vue移动端rem适配 amfe-flexible

首先安装 amfe-flexible ,

npm install amfe-flexible --save 

然后在main.js 引入

//在main.js 引入amfe-flexible
import 'amfe-flexible';

并且在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem

<header>
    <!-- 在页面 header标签中设置移动端视口-->
	<meta name='viewport' content='width=device-width,initial-scale=1.0, maximum-		scale=1.0,user-scalable=no'>
</header>

然后再第三方插件 postcss-pxtorem  他会自动将css代码中的px单位根据规则转换成rem 单位

//注意需要安装5.11 版本,否则报错
npm i postcss-pxtorem@5.1.1

项目根目录创建vue.config.js文件,设置如下配置

module.exports = {
  lintOnSave:false,// eslint-loader 是否在保存的时候检查
  css: {
       loaderOptions: {
            postcss: {
              plugins: [
                   // 把px单位换算成rem单位
                require("postcss-pxtorem")({
                     // 换算的基数 375的设计稿,换算基数就是37.5
                      rootValue: 37.5, 
                      selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
                      propList: ["*"], //可以从px更改为rem的属性。
                      minPixelValue: 1 // 设置要替换的最小像素值。
                  })
              ]
            }
       }
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值