介绍:
- amfe-flexible库可以自动计算html根节点的字体大小。
- postcss-pxtorem插件,可以将px单位转换成rem单位。
上面两个插件的搭配使用,将页面上的元素某些属性以相对于根元素的倍数来进行展示,从而适配不同的屏幕大小。
使用方法:
- 下载插件
npm i amfe-flexible -S
npm i postcss-pxtorem -D
- 使用方法:
- 在
main.js
中引入 amfe-flexible
import 'amfe-flexible'
2.新建postcss.config.js
文件,添加如下代码:
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75,
// 如果是二倍图750px,则rootValue写 75,如果是一倍图375px,则写 37.5
propList: ['*'],
}
}
}
实测有效~