lib-flexible和postcss-pxtorem搭配实现

lib-flexible解决移动端适配的问题

postcss-pxtorem将px转化成rem单位

# postcss-pxtorem：
npm i postcss-pxtorem -d

新建postcss.config.js 配置postcss-pxtorem
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 根目录字体大小。设计图页面尺寸如果是750就填75,是640就填入64,如果为了适配vantui我们需要和vant官方一致37.5。比如元素宽150px,最终页面会换算成 2rem （150px/75=2rem）
      propList: ['*'], // 属性的选择器，*表示通用
      minPixelValue: 12, // px小于12的不会被转换
      unitPrecision: 2, // 保留rem小数点多少位
      selectorBlackList: ['van'] // 忽略的选择器   .ig-  表示 .ig- 开头的都不会转换
      // selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
    }
  }
}

#lib-flexible
npm i lib-flexible -d

在main.js引入
import 'lib-flexible'

viewprot设置
<meta name="flexible" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">
    
将meta:vp标签的属性值设置为width=device-width, initial-scale=1就不仅能够将页面的布局视口自动设置为各个移动设备的理想视口，还能够同时兼容iphone、ipad的Safari以及WP7 IE浏览器的横屏问题。

解决在不同DPR(设备像素比)字体大小不一问题（例如：字体在dpr=2,dpr=3,的设备上字体大小不一样）

在现在iphone和其它手机中,dpr值都为2或者3,这样会出现移动端1px这个不是1px的难题,会是2px 3px的大小.这样会导致给一个文字加边框文字会塌下去的问题.

注意字体不要用rem，误差会比较大，此处写了一个@mixin进行处理

//定义一个mixin 根据不同dpr将px值转化成相应的dpr的px值。
// {$name}: $px*2PX;后面的单位必须设置成PX大写 要不然会转换成rem
/*
  @params $name 是css属性 比如width,top,font-size等
  @params $px 像素值
*/
# data-dpr用于处理视网膜屏
@mixin fontPX($px:16px, $name:font-size) {
    #{$name}: round($px)*1PX;   // round() 函数可以将一个数四舍五入为一个最接近的整数

    [data-dpr='2'] & {  
        #{$name}: $px*2PX;
    }

    [data-dpr='3'] & {
        #{$name}: $px*3PX;
    }
}