• 移动端自适应
  • pc端自适应（在一定屏幕范围内）

原理

使用amfe-flexible 和 postcss-px2rem依赖包，编译项目后自动把px转换成rem， 会根据屏幕大小来动态改变html的font-size值

 

教程

第一步，安装组件依赖

npm install amfe-flexible -S
npm install postcss-px2rem -S

第二步，引入lib-flexible.js

在入口文件main.js中引入（vue为例）

import "amfe-flexible/index.js";

第三步，在目录 public/index.html文件加入下面一行代码

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

第四步，配置postcss-px2rem

如果是vue-cli3构建的项目，那么在根目录找到vue.config.js文件，（没有找到的话，就新建一个）

module.exports = {
    // 基本路径
    publicPath: './',
    css: {
        loaderOptions: {
          css: {},
          postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
        }
    },
    // 代理
    devServer: {
        port: 8080,
        // host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, // 配置自动启动浏览器
        disableHostCheck: true,
        "proxy": {
        "/*": {
            "target": "http://xxx",
            "changeOrigin": true
        }
        }
    },
}

上面的 remUnit: 75, 这里的设置75， 就是设计图是750px， 如果你的设计图是 640px, 那么你改成64即可，如果你的设计图是1920px，那么你改成192即可

 

如果你的项目是 vue-cli2 构建的

找到根目录下.postcssrc.js文件，在里面添加以下代码：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!border*']
    }
  }
}

propList 表示匹配的属性 (表示匹配所有属性) 可以在里面用 !border 表示不配备边框，这样不会把边框1px变成1rem

在css中不想px转rem可以这样, 在样式后面写/no/注释即可

.nav {
   width: 400px;
   height: 300px;
   background: red;
   border: 1px solid black; /*no*/
}

以上配置完后，打开你们的项目编译后的页面，打开调试页面改变宽度就看到了，html的font-size值实时发生改变，和你写的css px值，都自动转成rem了

第五步，pc端做自适应解决方案

以上的是全自适应，如果你想控制自适应的范围，比如说，你做pc项目， 想在1300px - 1800px之间做自适应，小于1300px就设置个固定的html font-size值， 大于1800px就设置个固定的html font-size值

这样就可以使得pc项目布局的页面，不至于一直缩小自适应，也不至于一直放大

关键原理是通过媒体查询来控制，代码如下, 在你公共样式（或者全局样式）文件写上

/* 屏幕大于1800px的时候写死html的font-size值为200px */
@media screen and (min-width: 1800px) {
    html {
        font-size: 200px !important;
        /*no*/
    }
}
/* 屏幕小于1300px的时候写死html的font-size值为130px */
@media screen and (max-width: 1300px) {
    html {
        font-size: 130px !important;
        /*no*/
    }
}

以上只是一个例子， 移动端你就可以不用设置了， pc端，你想在什么范围，根据你的项目页面调就好了