vue3+vite项目自动转换 px 为 rem

在前端开发中,会遇到需要适配不同屏幕分辨率的情况,因此考虑编译时自动将项目中的 px 转换为 rem。本文介绍通过配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem

设置根节点 font-size

首先需要了解的是 rem 单位是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,相对的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

javascript 复制代码
// 基准大小
const baseSize = 32
// 设置 rem 函数
function refreshRem () {
  // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
refreshRem()
​
let tid
window.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
}, false);
window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
        // 页面从浏览器的缓存中读取
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }
}, false);

在 main.js 引入

arduino 复制代码
import ./rem.js

引入文件后,查看页面的html节点,是否有被自动添加 font-size

自动转换 px 为 rem

1、安装插件

复制代码
npm install postcss-pxtorem autoprefixer -D

2、配置 postcss.config.js

ini 复制代码
const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');
​
module.exports = {
  plugins: [
    // propList:需要进行转换的css属性的值,*意思是将全部属性单位都进行转换
    px2rem({ rootValue: 10,  exclude: /node_modules/i, propList:['*'] }),
    autoprefixer({}),
  ]
};

3、通过以下命令构建的vue应用在编译时会自动查找配置文件 postcss.config.js (内部基于 webpack 配置)

sql 复制代码
npm create vue@latest

总结

1、创建应用,安装依赖,注意去掉 package.json 中 type 配置

sql 复制代码
npm create vue@latest
npm i
npm install postcss-pxtorem autoprefixer -D

2、根目录创建 postcss.config.js 文件

3、main.js 同目录 创建 rem.js 文件,并在 main.js 引入

4、启动,在控制台可以看到 根节点有 font-size ,并且 px 已经被自动转为 rem了

arduino 复制代码
npm run dev

reference

  1. juejin.cn/post/684490...
相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作