移动端自适应方案

移动端适配的目标是让页面在移动设备上可以合理展示

viewport缩放方案

在对设计稿还原时，不需要去关注移动设备的屏幕尺寸，页面开发好后，在HTML的head标签里加入
本质上就是设置好布局视口宽度后再缩放页面，使其恰好能够撑满屏幕

优点是在开发过程中不需要去做额外的计算

动态rem

viewport是页面级（整体）缩放方案，动态rem是既可以保留一部分元素的尺寸，又可以根据屏幕缩放页面大小

对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位

如何做呢？
使用js设置html的font-size和页面宽度相同，而rem依赖于html的font-size，间接的让rem依赖于页面宽度

image.png

image.png

注意：字体还是使用字号，但是宽高使用动态rem（rem可以与其他单位同时存在）

image.png

在scss中rem2px

image.png

vw方案

一种不需要JavaScript的适配方案——vw适配方案

vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位

比如一个标题的font-size是32px，设计图页面尺寸为750px
(32/750)*100% = 4.27%，也就是说这个标题字号占屏幕宽度的4.27%，即可以写font-size: 4.27vw

scss中px2vw

@function px2vw($px) {
  @return $px * 100vw / 750; // 设计图页面尺寸为750px
}
.button {
  width: px2vw(120); // 设计图尺寸按钮宽度120px
  font-size: px2vw(28);
  line-height: px2vw(48);
  border: 1px solid #000;
  text-align: center;
}