移动端适配的目标是让页面在不同的移动设备上都合理展示，一般来说有两个方向.
两个方向
- 0适配，使用合理的flex布局+媒体查询做微调
- 基于一个尺寸的屏幕做设计，其他屏幕等比缩放
0适配
手机页面最常见的布局就是水平均分排列和两栏布局。使用flex布局实现的平均布局排列原本就是响应式的，所以无论屏幕宽度无论是多少，他都会平均分布
优点：如果能科学的写CSS，做出来的网页本来就是响应式的，能满足移动端适配的目标。
缺点：在不同屏幕的手机端，保不准某个按钮被挤到下面。所以要尽可能的去做不同屏幕的手机测试，对有问题的地方使用媒体查询。对一些不平均分布和两栏布局的情况,flex无法解决，如果大小屏都用同一尺寸展示，那会很奇怪。
等比缩放
做完PC端页面后，网页会在不同尺寸的屏幕下缩放。
优点： 不用担心某种手机尺寸没有适配到，开发的一套代码可以满足任何场景。
缺点：手机屏幕越做越大，是想展示更多的内容，如果文字图片在大屏手机上展示合理，放在小屏手机上可能会小的像蚂蚁。
等比缩放的具体方案
采用viewport缩放方案能又快又好的实现需求
原理
在写HTML,CSS还原设计稿的时候，不关注屏幕尺寸的差异，而是直接按设计稿的标注来开发。
在页面开发好后，在HTML的head标签里加入 之后通过JS计算屏幕的宽度，然后再除以设计稿宽度就OK。
这段代码的意思是： 设置布局视口的宽度为750px，再缩放页面(initial-scale)使其刚好撑满屏幕。
优点：开发流程简单，前端只需根据设计稿还原页面，不需要额外计算，设配范围广。
缺点：页面整体放大缩小，对于不想缩放的元素无法控制。
动态rem适配方案
在使用单位控制页面元素大小时，除了固定单位px， 还可以使用相对单位rem。2rem等于html标签font-size的2倍，rem的默认是1rem为16px。基于rem，对于需要适配等比缩放的元素使用rem作为单位，对于不需要适配等比缩放的元素使用px。对于需要等比缩放的元素，你只要调整html的fontsize就可以让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。
举个例子：设计稿的宽度为750px，然后设计稿上的一个div的标注尺寸是375px。我们可以
- 设置html的font-size为100*屏幕宽度/设计稿宽度
- 在写CSS时设置div的宽度是3.75rem（计算时用设计稿标注值除以100），边框宽度为1px
假设用户在逻辑像素宽度是375px的设备上打开页面，则html的font-size为100*375/750=50px，div的宽度是3.75rem，即187.5px刚好是屏幕宽度的一半。
优点：动态Rem方案既能实现缩放，又能个性化控制某些元素不缩放。
缺点：需要内嵌一段脚本去动态计算根元素大小
vw适配
vw是相对单位，1vw表示屏幕宽度的1%，因此，我们可以把需要适配屏幕大小等比缩放的元素都是用vw作为单位，不需要缩放的元素使用px做单位。
尺寸=100vw * 设计稿标注大小/设计稿宽度
在项目中，可以使用SCSS，把换算交给预处理器，例如：
@function px-vw($px){
@return $px * 100vw/750;
}
.button{
width: px-vw(100);
}
总结：
vw适配不需要JS计算宽度，方案灵活既能整体缩放又可以选择局部不缩放，相对viewport缩放和动态rems适配来说比较简单
