Vue项目‘xp’全局自动转换'rem'

vue2 webpack中使用

• 安装postcss-px2rem及px2rem-loader

  cnpm install postcss-px2rem px2rem-loader --save

• 在根目录src下utils目录下新建rem.js等比适配文件,内容如下

// rem等比适配配置文件

// 基准大小
const baseSize = 16

// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}

// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', function () {
   setRem();
}, false)

• 在main.js中引入适配文件

    import "./utils/rem"

• vue.config.js中配置插件

// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})
// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

vue3 vite TypeScript中使用

• vite中默认集成了postcss所以我们直接使用postcss的配置即可；
• postcss-pxtorem：PostCSS的插件，用于将像素单元生成rem单位
• autoprefixer：浏览器前缀处理
• amfe-flexible：可伸缩布局方案，替代了原先lib-flexible，选用了当前众多浏览器兼容的viewport

1. 安装依赖

//安装依赖 
cnpm i postcss-pxtorem autoprefixer amfe-flexible -S

2. 根目录创建 postcss.config.js

在vite.config.ts文件中引入对应依赖包，并配置代码如下

//引入依赖
import autoprefixer from "autoprefixer"
import postcsspxtorem from "postcss-pxtorem"
 
//配置适配方案
css: {
  postcss: {
    plugins: [
      autoprefixer({
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8",
          "last 10 versions", // 所有主流浏览器最近10版本用
        ],
        grid: true
      }),
      postcsspxtorem({
        rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
        propList: ["*", "!border"], // 除 border 外所有px 转 rem
        selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
      })
    ],
  },
}

3. src文件夹中创建 utils/rem.ts

import _ from 'lodash'

// 以1920px 底图为准开发页面
export const setDomFontSize = (): void => {
  let width = document.documentElement.clientWidth || document.body.clientWidth;
  let fontsize = (width <= 1200 ? 1200 : width) / 100 + 'px';
  (document.getElementsByTagName('html')[0].style as any)['font-size'] = fontsize;
}

let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)
window.addEventListener('resize', setDomFontSizeDebounce); // 浏览器加入收缩监听防抖，重新计算rem配置

4. main.ts中引入

import "amfe-flexible/index.js";