移动端适配

移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局。主流的实现方案有两种rem/vw

1.设置视口

• 布局视口：可看做CSS布局时的画布
• 视觉视口：可看做当前显示的页面区域

pc端的页面中，我们不需要对视口进行区分，因为布局视口和视觉视口是同一个。 浏览器视口一般默认为布局视口（网页布局的区域）。

手机访问时，布局视口远大于视觉视口。网页往往不能正常显示，如不留白，里面的东西会缩小；如正常大小，则只能看到很小的一部分，需要滑动浏览。

不管采用rem还是vw，设置视口是首要的。一般将视口宽度设为设备宽度,称为为理想视口。

<!-- device-width:设备宽度，initial-scale:初始缩放比。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  

2.rem

rem是相对根元素字体大小的单位，如html的font-size=50px，则1rem=50px;这样我们只需改变根节点字体大小就能适配不同尺寸设备。常用： 设备宽度/设计稿 * 根节点字体大小。

document.documentelement.style.fontSize = document.documentElement.clientWidth/750 *100 + 'px'。

3.vw

vw 表示视口的宽度，是个相对单位，1vw 表示屏幕宽度的 1%,100vw表示屏幕宽度。与rem类似，rem是与根元素字体大小对比；vw是与屏幕宽度作对比。我们可以需要适配屏幕的元素都使用 vw 作为单位。不需要缩放的元素使用 px 做单位，如字体大小。

比如：设计师交付的设计稿宽度是 750px，一个盒子的宽是150px。(150/750)*100% = 20% ，也就是说这个盒子宽在屏幕的20%，即20vw。不管多大屏幕都是如此。

将需要适配的元素，在写CSS设置样式时直接换算成 vw 即可，尺寸 = 100vw*设计稿标注大小/设计稿宽度。 利用sass函数帮我们计算：

@function px2vw($px) {
  @return $px * 100vw / 750;
}
.box {
  width: px2vw(120);
  height: px2vw(100);
  font-size: px2vw(14);  
}