Vue amfe-flexible
文章描述：
Vue引入amfe-flexible，amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。
切换镜像
npm config set registry https://registry.npm.taobao.org
安装相关依赖
cnpm install安装amfe-flexible
cnpm i -S amfe-flexiblemain.js
// 适配
import 'amfe-flexible';postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
安装
cnpm install postcss postcss-pxtorem --save-dev根目录新建postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
}其他设计稿
postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};测试
<div class="box"></div>.box{
width: 375px;
height: 300px;
background: #000;
}
发布时间：2023/05/06
发表评论