美文网首页前端开发笔记
Vue使用flexible 解决移动端适配问题

Vue使用flexible 解决移动端适配问题

作者: 这里是新开始 | 来源:发表于2018-07-30 15:45 被阅读304次

都8012年,才写这篇文章,好像看起来有点班门弄斧了。当整理整理资料,让本小白攻城狮做下记录,有空可以翻翻:>。

npm i postcss-pxtorem --sav-dev

Vue2.X版本脚手架搭建项目,根目录下存在一个.postcssrc.js文件 

postcdd-pxtorem 配置

新增图片红色标注中的代码

rootValue 基数;

例:rootValue为100 则1px转换为0.01rem

propList为需要转换单位的目录路径,可添加多个路径。

倘若默认为整个项目,则值为:propList:["*"]

区别目录进行单位转为主要是因为,项目中引入了其他的UI组件样式库,由于这些UI组件库本身就针对移动端,如若再次转换单位,会使得UI组件样式整体缩小。

flexible库,通过npm安装后,在入口文件main.js中import即可。

*postcss-pxtorem忽略单个属性

不识别0.01rem问题,忽略postcss-pxtorem规则,将px书写为‘Px’或‘PX’

// `px` is converted to `rem`

.convert {

    font-size: 16px; // converted to 1rem

}

// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers

.ignore {

    border: 1Px solid; // ignored    

    border-width: 2PX; // ignored

}

相关文章

网友评论

    本文标题:Vue使用flexible 解决移动端适配问题

    本文链接:https://www.haomeiwen.com/subject/hqefvftx.html