vue使用响应式尺寸

// 1.在index.html中的head中添加
    <script>
      let scale = 1.0 / window.devicePixelRatio;
      let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
      document.write(text);
      document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
      document.documentElement.setAttribute('data-dpr', window.devicePixelRatio + '');
      document.documentElement.setAttribute('data-theme', 'theme');
    </script>
// 2. npm install postcss-pxtorem 安装配置依赖，新建postcss.config.js文件
        // postcss.config.js
    module.exports = {
      plugins: {
        autoprefixer: {},
        'postcss-pxtorem': {
          rootValue: 100, // 根元素字体大小
          // propList: ['width', 'height']
          propList: ['*']
        }
      }
    }
// 3.npm install --save-dev html-loader 安装配置loader，在vue.config.js中配置。不然在html中使用字符串模板会报错。
    module.exports = {
      publicPath: './',
      configureWebpack: {
        module: {
          rules: [
            {
              test: /\.(html)$/,
              exclude: /node_modules/,
              use: {
                loader: 'html-loader',
                options: {
                  minimize: true
                }
              }
            }
          ]
        }
      }
    }