vue.js chrome tailwindcss px转rem方案

项目场景：

概述：最近在写一个vite框架基于vue3+ts的可视化项目，css框架采用的tailwindcss，适配方案采用 element-resize-detector 适配，该项目做到了百分百适配任何浏览器！

问题描述

适配方案element-resize-detector原理：动态获取浏览器的尺寸,在与设计稿(项目设计稿为：1920*1080)进行换算然后进行等比缩放

问题：开发过程中发现图片及问题等比例缩放展示效果欠佳,开始考虑tailwindcss适配方案;

方案采用pxtorem：尝试了绝大多数tailwindcss插件，效果最好的是postcss-pxtorem

注：如果Tailwindcss是通过官网安装的，已经内置了postcss，只需要装 postcss-pxtorem即可

npm install -D postcss-pxtorem

yarn add postcss-pxtorem

pnpm install -D postcss-pxtorem

postcss.config.js 配置 postcss-pxtorem

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},

'postcss-pxtorem': {

rootValue: 16, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小

unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字

propList: ['*'], // 可以从 px 更改为 rem 的属性使用通配符*启用所有属性

selectorBlackList: [],// （数组）要忽略并保留为 px 的选择器。

replace: true, // 替换包含 rems 的规则，而不是添加回退。

minPixelValue: 0, // 最小的转化单位

exclude: /node_modules/i // 要忽略并保留为 px 的文件路径

}

我项目中用的 "postcss-pxtorem": "^6.0.0" ，装好重启项目，就可以了

参考阅读

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

金钥匙