需要

  • 挪动端自适应
  • pc端自适应（在肯定屏幕范畴内）

实现原理

应用amfe-flexible 和 postcss-px2rem依赖包，编译我的项目后主动把px转换成rem， 会依据屏幕大小来动静扭转html的font-size值

想理解rem实现自适应的原理，大家能够自行谷歌，这里就不讲原理了

不懂原理的同学们也没关系，上面跟着操作就能够实现。

实现教程

第一步，装置组件依赖

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

第二步，引入lib-flexible.js

上面是以vue我的项目作为例子

在入口文件main.js中引入

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文件，（没有找到的话，就新建一个）

配置内容如下

css: {    loaderOptions: {        css: {},        postcss: {          plugins: [              require("postcss-px2rem")({              remUnit: 75              })          ]       }    }}

下面一段代码放到 module.exports = {}，的大括号外面

残缺代码如下：

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 构建的

装置依赖 postcss-pxtorem

npm i -D postcss-pxtorem

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

module.exports = {  plugins: {    'postcss-import': {},    'postcss-url': {},    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端，你想在什么范畴，依据你的我的项目页面调就好了

vite 打包的我的项目配置

新建个 postcss.config.js 文件， 下如下代码

装置依赖 postcss-pxtorem

npm i -D postcss-pxtorem
module.exports = {  plugins: {    autoprefixer: {      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']    },    'postcss-pxtorem': {      rootValue: 192,      propList: ['*', '!border*']    }  }}

根目录创立 .browserslistrc 文件

last 2 versions> 1%iOS 7last 3 iOS versions

记得先写后面三步!!!

踩坑以及解决

当你应用webpack打包的时候，如果你在款式里写了 /*no*/, 就是不想px转换成rem的时候， 例如下面说过的代码

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

这个px不转rem是依赖正文的，可是生产环境打包的时候就会把正文去掉，这样导致你写了 /*no*/不转这条css属性，也没成果，打包删除了正文，它就会主动帮你转了。

解决办法一. 能够把款式写到index.html文件的style标签中

这样打包不会删除index.html的css正文，如果你的webpack也把index.html的正文给删除了，那么你能够通过webpack把index.html不删除正文， 这个自行谷歌搜寻很多不打包压缩index.html文件，我我的项目不会删除index.html的正文

解决办法二. 通过配置sass-loader，使得打包时不删除所有的css正文

参考文章： webpack 中 postcss-px2rem 生产环境中正文生效

参考文章

前端中应用amfe-flexible和postcss-pxtorem

vite中配置postcss与postcss-plugin-px2rem