vue移动端适配之rem解决方案

2020/05/19 12:00:00

环境

vue-cli3.0
vue2.x

安装postcss-px2rem-exclude: (将px自动转为rem)

1	yarn add postcss-px2rem-exclude

在根目录的postcss.config.js添加如下代码：（如果没有则自己新建一个）

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,                            // 设计图的十分之一宽度，我这里是750px的设计图，所以设置为75
      exclude: /node_modules|folder_name/i    // 忽略node_modules内的第三方ui库，防止样式出现问题
    }
  }
};

在主入口index.html添加如下代码：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> 

  <script>
    // 添加屏幕调整监听事件,设置1rem=屏幕分辨率的1/10
    (function() {
      function autoRootFontSize() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
      }
      window.addEventListener('resize', autoRootFontSize);
      autoRootFontSize();
    })();
  </script>
</head>

补充

lib-flexible 淘宝弹性布局方案也可以与postcss-px2rem-exclude配合解决适配问题，但是超过540px的屏幕(比如ipad)效果不是很好，所以这里我就不具体说明了