vue3+ts+vite怎么实现postcss适配
时间: 2023-11-04 22:05:40 浏览: 120
在Vue3 + TypeScript + Vite中实现PostCSS适配,可以按照以下步骤进行操作:
1. 在根目录下创建postcss.config.js文件,并编写以下代码:
```javascript
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 根字体大小是 37.5
propList: ['*'],
selectorBlackList: ['.no__rem'] // 过滤掉.no__rem-开头的class,不进行rem转换处理
}
}
}
```
2. 在工具类文件中新建rem.js文件,编写以下代码:
```javascript
// 设置基础根文件大小
let baseSize = 37.5
// rem 函数
function setRem () {
// 设计稿一般都是以375的宽度
const scale = document.documentElement.clientWidth / 375
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 调用方法
setRem()
// 监听窗口在变化时重新设置跟文件大小
window.onresize = function () {
setRem()
}
```
3. 在main.ts文件中引入rem.js方法:
```javascript
import './utils/rem'
```
4. 安装postcss-pxtorem和lib-flexible插件依赖:
```bash
cnpm/ npm / yarn install postcss-pxtorem@5.1.1 --save-dev
cnpm/ npm / yarn install lib-flexible --save
```
相关问题:
阅读全文