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

安装插件

shell 复制代码
npm install postcss-pxtorem && amfe-flexible

main.ts

ts 复制代码
import 'amfe-flexible';

vite.config.ts

ts 复制代码
import postCssPxToRem from 'postcss-pxtorem';

...

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

App.vue

ts 复制代码
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';
}
相关推荐
今天头发还在吗4 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
渣哥12 分钟前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong27 分钟前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron
悠哉摸鱼大王30 分钟前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾40 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
西西学代码43 分钟前
Flutter---showCupertinoDialog
java·前端·flutter
你的眼睛會笑1 小时前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
ZTLJQ1 小时前
植物大战僵尸HTML5游戏完整实现教程
前端·游戏·html5
无光末阳1 小时前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js