vue 使用 flexible 适配 移动端（包含平板）

一. 引入淘宝 flexible
Flexible会将视觉稿分成100份，而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：(设计稿为750px为例）
1a = 7.5px
1rem = 75px
这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。
* 更多关于 flexible 的作用与用法 请自行查询
flexible 的cdn地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

二. 适配平板
如果只是单纯的引入flexible，在平板上并不是能够完成适配
所以要加上这样一段代码（与引入的flexible 有先后顺序）：

整体index.html 代码

  
    
    //该行要注释
    
    
    
    
    
    
    
    
    
    
    
  
  
    

    
    
    
  

三. 单位转化 px转为rem
安装 postcss-px2rem-exclude
npm install postcss-px2rem-exclude
在项目根目录 找到 .postcssrc.js 修改为

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {
      "remUnit": 75,  //换算的基数，1rem == 75px
      "exclude": /node_modules/i   //屏蔽第三方组件库，避免把第三方组件库的px也转成rem，这里是屏蔽了所有第三方，也可以屏蔽单独的某一个第三方组件库。
    }
  }
}

四. 字体建议使用px
如果有slogan之类大于48px的，可以使用rem
* 此时会有一个问题，就是当你使用 scss/sass 的时候 使用 /no/和/px/ 来屏蔽字体大小的时候是不生效的，只有在css中才会生效，解决办法 比较偷鸡 把单位 px 改为 Px/PX

//util.js
@mixin px2px($n){
  font-size: $n * 1Px;
  [data-dpr="2"] & {
    font-size: $n * 1Px;
  }
  // for mx3
  [data-dpr="2.5"] & {
    font-size: ($n * 2.5 / 2) * 1Px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
    font-size: ($n * 2.75 / 2) * 1Px;
  }
  [data-dpr="3"] & {
    font-size: ($n / 2 * 3) * 1Px;
  }
  // for 三星note4
  [data-dpr="4"] & {
    font-size: $n * 2Px;
  }
}
@mixin f32px{
  @include px2px(32);
}
@mixin f28px{
  @include px2px(28);
}
@mixin f26px{
  @include px2px(26);
}
@mixin f24px{
  @include px2px(24);
}
@mixin f22px{
  @include px2px(22);
}
@mixin f20px{
  @include px2px(20);
}
@mixin f18px{
  @include px2px(18);
}
@mixin f16px{
  @include px2px(16);
}
@mixin f14px{
  @include px2px(14);
}
@mixin f12px{
  @include px2px(12);
}
@mixin f10px{
  @include px2px(10);
}
//使用时   @include f12px   就可以了

在实际使用的时候还会遇到一个问题是 需要在js中 计算 px转rem ， flexible其实是有写好的方法的

1577932083(1).jpg

使用 ： lib.flexible.px2rem(val) ; val有px单位时 返回的是带有rem单位的字符串，val为数字时，返回的是不带单位但转化好的数字。