前端移动端和PC端自适应解决方案，支持vite打包配置
# 前端移动端和PC端自适应解决方案，支持vite打包配置
# 需求
- 移动端自适应
- pc端自适应（在一定屏幕范围内）
# 实现原理
使用amfe-flexible 和 postcss-px2rem依赖包，编译项目后自动把px转换成rem， 会根据屏幕大小来动态改变html的font-size值
想了解rem实现自适应的原理，大家可以自行谷歌，这里就不讲原理了
不懂原理的同学们也没关系，下面跟着操作就可以实现。
# 实现教程
# 第一步，安装组件依赖
npm install amfe-flexible -S
npm install postcss-px2rem -S
2
# 第二步，引入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
})
]
}
}
}
2
3
4
5
6
7
8
9
10
11
12
上面一段代码放到 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
}
}
},
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
上面的 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*']
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
propList 表示匹配的属性 (表示匹配所有属性) 可以在里面用 !border 表示不配备边框，这样不会把边框1px变成1rem
# 在css中不想px转rem可以这样, 在样式后面写/no/注释即可
.nav {
width: 400px;
height: 300px;
background: red;
border: 1px solid black; /*no*/
}
2
3
4
5
6
以上配置完后，打开你们的项目编译后的页面，打开调试页面改变宽度就看到了，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*/
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
以上只是一个例子， 移动端你就可以不用设置了， 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*']
}
}
}
2
3
4
5
6
7
8
9
10
11
根目录创建 .browserslistrc 文件
last 2 versions
> 1%
iOS 7
last 3 iOS versions
2
3
4
记得先写前面三步!!!
# 踩坑以及解决
当你使用webpack打包的时候，如果你在样式里写了 /*no*/, 就是不想px转换成rem的时候， 例如上面说过的代码
/* 屏幕大于1800px的时候写死html的font-size值为200px */
@media screen and (min-width: 1800px) {
html {
font-size: 200px !important;
/*no*/
}
}
2
3
4
5
6
7
这个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 生产环境中注释失效 (opens new window)
参考文章