vue/cli4 页面适配

使用插件对移动端的页面进行适配

1.

引入与安装 amfe-flexible

npm i -S amfe-flexible

在项目的入口main.js文件中引入amfe-flexible:

import "amfe-flexible";

2.

 使用postcss-px2rem自动将css中的px转换成rem

安装postcss-px2rem ：　

npm install postcss-px2rem --save-dev

3.找到public中index.html文件

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

用上面的代码替换下面的在代码

  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->

4.在vue.config.js中加入配置项 (如果没有vue.config.js就直接根目录(package.json同级)新建一个)

module.exports = {
//   publicPath: "./",    //打包的时候用变成相对路径不需要可以不管
  css: {
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },

      postcss: {
        // options here will be passed to postcss-loader
        plugins: [
          require("postcss-px2rem")({
            remUnit: 37.5, //设计稿的 十分之一
            exclude: /node_modules/i,
          }),
        ],
      },
    },
  },
};

5.测试，在viwes文件夹下的Home.vue复制下面的代码

<template>
  <div class="home">
    <div class="one"></div>
  </div>
</template>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.home {
  width: 375px;
  height: 650px; 
  overflow: hidden;
  background-color: pink;
  .one{
    width: 50%;
    height: 20%;
    background-color: aqua;
  }
}
</style>