使用postcss-pxtorem进行自适应

目录

一、下载插件

二、在utils文件夹下新建rem.js文件

三、在main.js中引入rem.js 

四、在根目录新建.postcssrc.js文件

---

一、下载插件

npm i postcss-pxtorem -S

二、在utils文件夹下新建rem.js文件

// 跟.postcssrc.js里的rootValue的值是一致的
const baseSize = 100
// 设置rem函数
function setRem() {
  // 当前页面宽度相对于1920宽的缩放比例，可根据自己需要修改。pc端一般使用的是1920，这里使用1920px
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小，最高为两倍图，及设计稿为1920*2
  console.log((baseSize * Math.min(scale, 2)), '8888')
  document.documentElement.style.fontSize = ((baseSize * Math.min(scale, 2)) > 12 ? (baseSize * Math.min(scale, 2)) : 12) + 'px'
  console.log(document.documentElement.style.fontSize, '8888')
}
// 初始化
setRem()
// 改变窗口大小时重新设置rem
window.onresize = function() {
  setRem()
}

三、在main.js中引入rem.js 

import '@/utils/rem' 

四、在根目录新建.postcssrc.js文件

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  'plugins': {
    'postcss-pxtorem': {
      rootValue: 100, // 换算基数，默认100，把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
      // unitPrecision: 5,  //保留rem小数点多少位
      propList: ['*'] //  存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
      // selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法。
      // replace: true,
      // mediaQuery: false,//（布尔值）媒体查询( @media screen 之类的)中不生效
      // minPixelValue: 12,///设置要替换的最小像素值，px小于12的不会被转换
      // //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性
      // propBlackList: ['font-size'], //黑名单
    }
  }
}

注意：如果没设置文字大小会按照100px进行设置