项目场景:
概述:最近在写一个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" ,装好重启项目,就可以了