1、动态rem值计算(这里使用的less,以iphone6为标准设计稿为例)
@vw_fontsize: 14;
@vw_base: 375;
html {
font-size: (@vw_fontsize / @vw_base) * 100vw;
}
// 横屏
@media screen and (orientation: landscape) {
html {
font-size: (@vw_fontsize / @vw_base) * 100vh;
}
}
2、使用pxtorem对项目中的px转化成rem
- 在vite中使用,vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import pxtorem from 'postcss-pxtorem'
export default ({ mode }) => {
return defineConfig({
css: {
postcss: {
plugins: [
pxtorem({
rootValue: 14,
propList: ['*'],
selectorBlackList: ['.norem']
})
]
}
}
})
}
2.在webpack中使用,根目录增加 postscss.config.js文件
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 14,
propList: ['*'],
selectorBlackList: ['.norem']
}
}
}