关于移动端适配的实现
平时在PC端，我们一般做的可能就是固定一个中间宽度，然后用媒介查询去做响应式之类的操作。但是，在移动端设备上，由于市面上机型的屏幕宽度非常多，我这里就总结一下适配的方案。
移动端适配，就是在不同宽度设备的屏幕上，显示正常，而不会漏出空白或溢出等，看看效果：
可以看到上图，图片和标题都是随着屏幕的大小改变的，适配的方式主要有两种。
Rem布局
rem布局主要是利用1rem等于根节点大小来实现的，通过屏幕宽度来动态改变根字体大小，从而实现不同屏幕的适配：
假设我们根据设计宽度为375px来，可以得出1rem对应的根字体大小应为：
html { font-size: 1px; }
body { font-size: 16px; } // 因为html字体会影响其他的，所以body重置为默认大小
这样，1vw就对应1px大小了，但是rem的大小并不会随着屏幕变化，所以我们就得要根据屏幕宽度来改变了，有两种方式：第一种通过js来动态改变；这里，我介绍另一种，通过vw来改变：
html { font-size: calc(100vw / 375); }
body { margin: 0; font-size: 16px; }
当然，比例可以设置不同的，按照自己的习惯可以设置为其他的大小。
其原理就是：需要根字体大小 / 设计稿的宽度 = 需要vw大小 / 100vw。
vw布局
vw是根据视口来计算宽度的，一个vw就表示视口的1/100，如果是100vw则表示为整个视口宽度，利用vw属性和scss预编译，就可以很简单实现移动端适配布局：
@width: 375; // 设计稿的宽度
@function vw($px) {
return ($px / $width) * 100vw;
}
这样就通过scss实现了一个可以适配的函数，通过调用这个函数，我们就可以根据不同的屏幕宽度来获得不同的单位：
img {
width: vw(375); // 在375px的屏幕下，就表示宽度为375
}
其原理就是：设计稿目标的宽度 / 设计稿的宽度 = 需要vw大小 / 100vw。
postcss-plugin-px2rem
通过上面的vw布局和rem布局，我们能实现移动端的适配，但是功能还不够强大，通过postcss的插件，我们可以配置更多选项的适配。
安装
- npm：
npm i --save postcss-plugin-px2rem
- yarn：
yarn add postcss-plugin-px2rem
使用
基于Vue可以在vue.config.js或者新建postcss.config.js文件配置px2rem插件：
module.exports = {
plugins: [require('postcss-plugin-px2rem')({
rootValue: 100,
exclude: /(node_module)/,
mediaQuery: false
})]
}
这里的rootValue表示1px等于1/100rem大小，当然也可以使用对象，例如：{ px: 50, rpx: 100 }；
exclude表示排除的文件（这些文件不会把px单位编译为rem）；
mediaQuery表示排除媒介查询的样式（这些文件不会把px单位编译为rem）。
配置完成之后，我们还是得设置HTML的根字体大小，这里因为rootValue是100，假设设计稿是750px大小的话，设置如下：
html { font-size: calc(100 * 100vw / 750); }
body { font-size: 16px; }
除了可以转换px外，我们还可以使用之前说的给rootValue配置为对象的方式，来设置成小程序那种rpx的布局方式：
module.exports = {
plugins: [require('postcss-plugin-px2rem')({
rootValue: {
px: 50,
rpx: 100
},
exclude: /(node_module)/,
mediaQuery: false
})]
}
html { font-size: calc(100 * 100vw / 750); }
body { font-size: 16px; }
img {
width: 750rpx; // 等同于 375px
}
这样的话，就可以使用rpx来像小程序那样完成布局了，更多配置可以看postcss-plugin-px2rem。
总结
适配的方案无非就是rem和vw两种方式，主要是换算公式可能比较麻烦，甚至有些时候难以理解，个人觉得多上手试试，慢慢还是能理解的。
