vue移动端适配(postcss-pxtorem和amfe-flexible)
一、移动端适配(postcss-pxtorem和amfe-flexible)在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配)实现思路:①通过postcss-pxtorem实现将px转成rem,②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件,我们就可以实用设计稿的px来进行开发了。1.安装postcss-p
·
一、移动端适配(postcss-pxtorem和amfe-flexible)
在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配)
实现思路:①通过postcss-pxtorem实现将px转成rem,②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件,我们就可以实用设计稿的px来进行开发了。
1.安装postcss-pxtorem和amfe-flexible
Npm install postcss-pxtorem --save-dev
Npm install amfe-flexible --save
2.在vue的main.js中引入amfe-flexible
import ‘amfe-flexible’;
3.在.postcssrc.js中配置,vue-cli3.0的版本在postcss.config.js中配置
module.exports = {
"plugins": {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
基本配置就完成了,rootValue这个值可以自己配置,如过你设计稿的长度是750基数的可以将rootValue的值修改为75
更多推荐
已为社区贡献6条内容
所有评论(0)