vue使用postcss-pxtorem适配移动端

postcss-pxtorem适配移动端

vant设计稿使用的是375px

首先下载

yarn add postcss-pxtorem

lib-flexible

然后再vue.config.js配置

  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, //这个37.5就是当做750px的设计稿上1rem为37.5px
            //设计稿元素尺寸/37.5 换算的基数 750/37.5=20rem  css中设置了100px 也就是再750中的设计稿中量取到100px  这时候是这样算的: ( 100px / 37.5 ) * (当前html的font-size 也就是底下 rem.js 设置的font-size )
            selectorBlackList: [], // 忽略转换正则匹配项
            propList: ['*'],
          }),
        ]
      },
      <!- 这是全局配置css变量 配置全局-->
      scss: {
        prependData: `@import "~@/assets/css/variables.scss";@import "~@/assets/css/mixins.scss";`
      }
    }
  },

然后配置一个rem.js 监听窗口变小的时候修改html的font-size

// 设置 rem 函数
function setRem () {
  // 375px iphone6 屏幕的大小; 375px = 20rem; 1rem = 18.75px
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
  htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在main.js中调用rem.js

import './utils/rem'
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值