本文目录：
- 1.手动方案
- 2.flexible方案
- 3.vh、vw方案
- 4.flex布局
- 5.px布局
- 6.媒体查询
1.手动方案
如果你的项目没有使用框架和自动化构建工具，那么如果开发移动端页面的时候，你只需要在页面最开始的时候引入下面的js代码
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
在UI稿尺寸为7501334的时代，这句话在设置了font-size后，px和rem的转换比例成了100, 比如UI稿一个长宽分别为120px40px，那么开发者对应的写成1.2rem*0.4rem就可以了。
这种换算已经非常的方便，但是在前端工程化的项目中，我们需要使用更加聪明的方法：
2.flexible方案
lib-flexible是淘宝团队总结出来的移动端弹性布局适配方案
原理是通过js实时的检测屏幕的大小并改变html标签的字体大小，再结合rem的特性来完成页面的自适应。
安装
npm install lib-flexible --save
在main.js中引入
import 'lib-flexible'
接下来把public文件夹中的index.html页面中的meta，name=viewport标签去掉，因为这个标签的作用flexible可以去自动完成。
1）除font-size外，其它大小都根据750标注稿的尺寸，转换成rem单位的值，转换方法为：标注稿尺寸 / 标注稿基准字体大小；
2）标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64；（所以淘宝这个方案是可以在任意设计稿尺寸下使用的）
注意：这里我们假设拿到的标注稿的宽度是750px
标注稿上的每个尺寸都需要手动去除以75px去换算成rem极大的增加了开发的工作量，这里我们借助插件来帮我们自动实现。
安装专门用来自动计算rem的插件
npm install postcss-pxtorem --save
在项目目录下的postcss.config.js添加配置代码
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem':{
//设计稿对应的rem尺寸，此时是的设计稿对应的是75px
rootValue:75,
//所有元素的px自动转化成rem
propList:['*']
}
},
};
大写的PX不会被转换成rem，适合边框使用
由于 viewport单位得到众多浏览器的兼容，上面这种方案现在已经被官方弃用：
lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。
下面我们来看看现在最流行的 vh、vw方案。
3.vh、vw方案
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
上面的 flexible方案就是模仿这种方案，因为早些时候 vw还没有得到很好的兼容。
- vw(Viewport's width)： 1vw等于视觉视口的 1%
- vh(Viewport's height) : 1vh 为视觉视口高度的 1%
- vmin : vw 和 vh 中的较小值
- vmax : 选取 vw 和 vh 中的较大值
如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。
这里的比例关系我们也不用自己换算，我们可以使用 PostCSS的 postcss-px-to-viewport 插件帮我们完成这个过程。写代码时，我们只需要根据 UI给的设计图写 px单位即可。
安装
npm install postcss-px-to-viewport --save-dev
引入vue项目，在postcss.config.js引入
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
}
}
}
可能遇到的问题：
@keyframes 和media查询里的px默认是不转化的，设置mediaQuery： true则媒体查询里也会转换px
@keyframes可以暂时手动填写vw单位的转化结果
引用vant，把上面的exclude去掉，这样表示全部内容进行vw转换，会遇到这样的问题：组件变得很小，被压扁了一半，这是因为vant团队是根据375px的设计稿去做的，理想视口宽度为375px。我们自然不能去跟随vant去重新出一版375的设计稿，这样成本太高了，我们可以改变postcss.config.js配置文件
const path = require('path');
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
解决思路：如果读取的是vant相关的文件，viewportWidth就设为375，如果是其他的文件，我们就按照我们UI的宽度来设置viewportWidth，即750。
4.flex布局
5.px布局
传统的px布局并不一定会被淘汰，尽管开发成本高，但是能更符合用户的需求，可以考虑使用px 为主，vx 和 vxxx（vw/vh/vmax/vmin）为辅，搭配一些 flex布局
6.媒体查询
在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询。
在跨设备类型如果交互差异太大的情况，考虑分开项目开发。
