vue-自适应布局-postcss-pxtorem-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-自适应布局-postcss-pxtorem。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

postcss-pxtorem是一个PostCSS插件，用于将CSS中的像素值转换为rem单位，以实现响应式布局和适配不同屏幕尺寸的需求。

它的适配原理是将CSS中的像素值除以一个基准值，通常是设计稿的宽度，然后将结果转换为rem单位。这样，不同屏幕尺寸下，rem单位的大小是相同的，从而实现了响应式布局和适配的效果。

例如，如果设计稿的宽度为750px，那么在CSS中设置一个元素的宽度为150px，postcss-pxtorem会将其转换为2rem（150/750=.2，.2*10=2）。

通过使用postcss-pxtorem，我们可以方便地实现移动端适配，减少手动计算和调整像素值的工作量，提高开发效率。

1、下载postcss-pxtorem

npm install postcss-pxtorem --save

2、配置postcss.config.js文件，如没有，新建

// postcss.config.js
module.exports = {
    'plugins': {
      // to edit target browsers: use "browserslist" field in package.json
      'autoprefixer': {},
      'postcss-pxtorem': {
        rootValue: 16, // 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
        propList: ['*']
      }
    }
  }

3、在utils文件夹下创建rem.js

// 设置 rem 函数
function setRem() {
    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
    const screenWidth = 1920
    const scale = screenWidth / 16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function() {
    setRem()
  }

4、main.js文件里面引用rem.js