移动端使用lib-flexible

lib-flexible的作用:将设计稿中的设备独立像素来体现到逻辑像素的开发过程中。   1,会自动在html的head中添加一个meta name="viewport"的标签,   2,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。       移动端使用lib-flexible

 

 引入postcss-px2rem,将项目中的px自动转换成rem输出;

  1,安装postcss-px2rem

  2,在vue.config.js中

 1 var px2rem = require('postcss-px2rem');
 2 
 3 module.exports = {
 4   css: {
 5     loaderOptions: {
 6       postcss: {
 7         plugins: [
 8           px2rem({
 9             remUnit: 37.5 //vant的组件都是按照该基准做的,所以为了统一,自己写的也需要按照该基准
10           })
11         ]
12       }
13     }
14   }
15 }

 

 

上一篇:Ceph 之RGW Cache


下一篇:vue使用视口适配分辨率