关于vant里面的元素px转rem

最新推荐文章于 2024-08-11 21:18:15 发布

风与清歌

最新推荐文章于 2024-08-11 21:18:15 发布

阅读量899

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/max_or_min/article/details/119752944

版权

本文介绍了如何通过npm安装postcss-pxtorem和amfe-flexible，配置postcss.config.js文件，以及在main.js中引入相关代码，实现在不同设备上自动将px转换为rem，从而实现响应式布局。此外，还提供了手动创建rem.js文件的方法，同样达到px转rem的效果。

摘要由CSDN通过智能技术生成

用npm下载以下

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

在postcss.config.js里面输入以下代码（没有该文件的话，可以自己在项目的根目录里面进行创建

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      //这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
      propList: ['*']
    }
  }
  }

（1）最后在main.js里面引入

import 'amfe-flexible

重启服务即可观察到px已经自动转成了rem

（2）或在plugin文件夹里面创建rem.js

// 设置 rem 函数
function setRem () {

    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    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里面引入即可

重启服务观察到px已经自动转成了rem