**
vue移动端响应式方案设计
**
style响应与页面响应插件两个插件
postcss-pxtorem、amfe-flexible
1、postcss-pxtorem 可以实现动态的将px转为rem单位(px to rem)
//安装
yarn add postcss-pxtorem --dev
使用vue cli创建的,在项目根目录下有个postcss.config.js,打开在里面添加一下一行配置
//配置
plugins: {
autoprefixer: {},
'postcss-pxtorem': {
rootValue: 37.5, //这里是px转为rem的基准值,当字体为设置14px时,在通用手机尺寸上显示为14px。
propList: ['*']
}
}
2、amfe-flexible 页面响应式设计
//安装
yarn add amfe-flexible
//main.js中引入
import 'amfe-flexible'
这样页面上使用px单位了,在手机端可以自动适应。