前言
远古时期就不提了，什么用缩放之类的适配移动端。
目前最流行的适配移动端的方式是使用rem。
rem适配移动端的原理在于，1rem = 根元素字体大小。
比如默认情况下，1rem = 16px。
为什么使用rem
先说说流程。
UI给出切图，比如设计稿以750px为宽度。
但是移动端存在各种大小的手机屏幕。
有375的iphone6，有393的pixel 5，500多的平板。
那么如何适配不同的屏幕呢。
那么答案当然是百分比。
比如在任何手机上，我的按钮就是50%的宽度，这样看起来就一致了。假如写死为px，那么这个手机上很宽，那个手机上很窄，布局上会存在非常严重的问题。
然而百分比自然是不能直接用的，因为所有的html元素并不是都处于body中，他们的百分比是基于父容器的。
因此排除百分比的方案。
我们有两个目的：
- 适配不同的屏幕，不同屏幕上呈现相同的内容，相同的比例。
- 开发时要尽可能简单，最好能直接用设计稿上面的数值进行开发。
此处省略过程，总之人们想到了rem的方案，rem基于根元素字体大小而拥有不同的大小。那么开发时统一使用rem（毕竟服务器上只有一套代码），而根据不同设备动态设定根元素的字体大小，这样问题就解决了。
方案
网易方案
我们想要的是同样的比例，因此下面所说的px都是设计稿中的px（实际上是一个比例）
还记得前面提到的设计稿的事情吗。
为了便于开发，我最希望的就是直接把rem和px画个等号，这样就不需要进行换算之类的了。
因此，我们现在的任务是，设定根元素字体的大小，使得开发时尽可能地减少换算的难度。
然而这样是行不通的。比如谷歌浏览器上，字体最小的大小为12px。
假设在750px的屏幕上，我们需要根字体的大小为1px，这样设置会失败（同理10px也不行）。那么换成100倍呢，1rem = 100px？ 曾经的网易使用的就是这套方案，1rem = 100px。
假如500px的宽度，则750px的设计稿，那么我们可以换算一下。
因此设置这个值为rem的值。
-
在设计稿中，为了方便换算，我们需要1rem = 100px。
-
我们希望7.5rem = 设计稿中的750px = 100%的宽度
使用等价替换后，此时我们可以忘记750了
500px/7.5 = 66.666667px
由于设计稿的大小不尽相同，因此可以给出一个公式用于计算。
1rem = 实际宽度/设计稿的百分之一。
比如1rem = 500/7.5。
淘宝方案
淘宝方案没什么好说的，我只说结果吧。
10rem = 100%宽度。
存在插件，编写时使用px，到运行时会变成rem。
比较
网易方案中，不变的是，1rem = 设计稿中100px（实际应用中这是一个比例），因此我们需要算出这个比例在实际的视口宽度中是多大。
淘宝方案中，不变的是，10rem = 100%宽度。视口宽度/10就行了。
那些比较专业的对比我也不提了，给你截个图
网易换成淘宝的方案了。
为什么使用rem
你可能发现了，我并没有回答前面为什么使用rem的问题。
因为我也很疑惑。
- 使用rem的年代，css3还没出来，不存在vw和vmin的新单位。
- rem这套方案已经沿用多年，是最稳定的一套移动端适配的方案，拥有众多插件支持。
新的方案
因此，现在如果做移动端适配，完全可以使用vmin作为单位，而不是rem，B站就是这么做的。
vw和vmin
移动端上存在一个问题，用户有可能会旋转屏幕，而vw始终是宽度的1%。这就导致一个元素如果设置为vw单位，那么当他由竖屏转向横屏时，大小会发生改变。
具体可以看b站的这个tab栏，假如使用vw，那么即使是在横屏的时候，tab栏依旧还是那么几个tab（不会因为宽度变宽了就变多了）。
因此可以看出，vmin的意义在于：
- 在不同设备上保持相同的比例(竖屏时)。
- 横屏时，元素拥有和竖屏时相同的大小。
又像是百分比，又像是固定大小。