vue2 移动端amfe-flexible

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，而amfe-flexible是lib-flexible的升级版，所以现在我就只使用amfe-flexible了。

vw 作为布局单位，从底层根本上解决了不同尺寸屏幕的适配问题，因为每个屏幕的百分比是固定的、可预测、可控制的。 viewport 相关概念如下：

• vw：是 viewport's width 的简写，1vw 等于 window.innerWidth 的 1%；
• vh：和 vw 类似，是 viewport's height 的简写，1vh 等于 window.innerHeihgt 的 1%；
• vmin：vmin 的值是当前 vw 和 vh 中较小的值；
• vmax：vmax 的值是当前 vw 和 vh 中较大的值；

与其搭配的postcss-px2rem(pxtorem）作用为把px转变为rem

npm install amfe-flexible --save
npm install postcss-px2rem --save-dev

 安装完成后在main,js 引入 amfe-flexible

import "amfe-flexible" 

 index.html  meta 标签替换

 <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />

　　

新建postcss.config.js  配置参数如下：

module.exports = {
  plugins: {
    "postcss-px2rem": {
      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度.
      // viewportHeight: 1200, // 视窗的高度，对应的是我们设计稿的高度.(也可以不配置)
      unitPrecision: 5, // 保留几位小数，指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      remUnit: 75,
      // selectorBlackList: ['tab-bar', 'tab-bar-item','shopping-cart-bottom-bar'], // 指定不需要转换的类
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位.
      // mediaQuery: false // 允许在媒体查询中转换`px`
    },
  },
};

　但是在行内样式设置px时没有生效，可以在main.js手动写一个转rem方法，挂载在原型上。

 

function px2rem(px) {
  if (/%/gi.test(px)) {
    // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
    return px;
  } else {
    return parseFloat(px) / 75 + "rem";
  }
}
Vue.prototype.$px2rem = px2rem; // 放到全局