【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';
}
相关推荐
祝余呀13 分钟前
HTML初学者第四天
前端·html
浮桥2 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥2 小时前
Vue框架之钩子函数详解
vue.js
七夜zippoe2 小时前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆2 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13133 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor3 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军3 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺3 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到113 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter