移动端（03）

移动端【适配】方案

由于手机屏幕尺寸、分辨率不同，还要要考虑横竖屏问题，为了使得web页面在不同移动设备上【实现尽可能统一或合理的展示效果】，需要在开发过程中使用合理的适配方案。

 常见的适配方案如下：

rem适配

 rem单位介绍

Rem( font size of the root element) 是一个相对单位，相对于根元素的字号大小进行计算

大多数浏览器的默认字号是16px，因此默认1rem=16px。

 rem布局原理

在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。

例：

```

.box{

   width:1rem;

   height:1rem;

}

@media screen and (min-width:320px){

  html{

    font-size:50px;

  }

}

@media screen and (min-width:480px){

  html{

    font-size:75px;

  }

}

```

由于设备尺寸繁多需要设置密集的断点因此通过js动态计算并设置html的fontsize值是最常用的方式