【Vue】Vue3 pc 端配置 rem 响应式

安装插件

npm install postcss-pxtorem && amfe-flexible

main.ts

import 'amfe-flexible';

vite.config.ts

import postCssPxToRem from 'postcss-pxtorem';

...

  // 响应式设置
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 192, // 1rem的大小
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        }),
      ],
    },
  },

也可以单独创建 postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 192, // 根据设计稿尺寸决定
      propList: ['*'],
    },
  },
}

App.vue

import { BrowserSize } from '@/utils/index';
onMounted(() => {
  BrowserSize();
});

// @/utils/index
export function BrowserSize() {
  var docEl = document.documentElement,
    clientWidth: number,
    clientHeight: number,
    clientWidth = docEl.clientWidth;
  clientHeight = docEl.clientHeight;
  if (!clientWidth) return;
  if (!docEl.addEventListener) return;
  // clientWidth = 1920;

  // if (clientWidth < 1920) {
  //   clientWidth = clientWidth;
  // }

  docEl.style.fontSize = clientWidth / 10 + 'px';
}

高度适配

export function setRem() {
  var docEl = document.documentElement,
    clientWidth: number,
    clientHeight: number,
    clientWidth = docEl.clientWidth
  clientHeight = docEl.clientHeight
  if (!clientWidth) return
  if (!docEl.addEventListener) return

  // 大于1920px的设备，不进行rem
  if (clientWidth > 1920) {
    clientWidth = 1920
  }

  // 适配高度，小于1080px，高度为1080px，此时会出现滚动条
  const app = document.getElementById('app')
  if (app) {
    if (clientHeight < 1080) {
      app.style.height = '1080px'
    } else {
      app.style.height = '100vh'
    }
  }

  docEl.style.fontSize = clientWidth / 10 + 'px'
}