移动端web开发（04）

rem适配实现

1）设置页面的viewport

2）以设计稿为基准值，1rem=100px,使用rem单位取代px常规布局。

3）换算不同设备尺寸下1rem的值，即改变不同尺寸下html 的font-size

```

<script>

  //获取html宽度（设备宽度）

    var deviceWidth = document.documentElement.clientWidth;    

  // 750可以根据实际设计稿的宽度进行修改

    if(deviceWidth>750){ //假设设计稿为750

       deviceWidth = 750;

    }

    var fs = (deviceWidth*100)/750;

    document.documentElement.style.fontSize = fs + 'px';

   

</script>

```

 以上代码假设基准值为设计稿，设计稿宽度为750px,如果页面宽度低于750px,那么页面中html的font-size也会按照（当前页面宽度/750）的比例变化。这样，页面中所有应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放，从而达到适配。

 

### 关键步骤

- 设置viewport

```

<meta name="viewport" content="width=device-width, initial-scale=1.0">

```

- 引入计算比例js,计算不同屏幕尺寸下1rem的大小

  - 换算比例时的基准值以设计稿为准 device-width/基准值

  ```

  <script src="remscale.js"></script>

  ```

- 从设计稿量取px值转换成rem单位进行布局

  ```

  100px* 100px  

  ||

  1rem 1rem

  ```

注：

```

//最外层的盒子居中处理

.wrap{

    max-width:6.4rem;  //以设计稿为准

    margin:0 auto;

    height:500px;

    background-color: yellowgreen;

}

     

```

 

 vw适配

 vw单位介绍

vw 即Viewport's width的简写，是css3规范中的视口单位，

- 相对单位

- 相对于视口大小

  - 视口宽度 =  100vw   ----> 1vw =  视口宽度1%

相对于视口的宽度，视口被均分为100单位的vw。

```

750px  =  100vw

7.5px =  1vw

```

```

相关阅读：

除此之外还有vh单位 即Viewport's height，相对于视口的高度，视口高度被均分为100单位的vh。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

```


 使用vw单位实现适配

1vw 等于视窗宽度的1%，在页面布局中将px值换算成vw,

当视口宽度发生变化，则元素大小随即发生变化，实现页面适配

- 提示：可以借助插件自动计算

- 缺点：转换后的长度单位不够直观修改维护困难

 

# 步骤

- 设置一下基准值  

- 从设计稿量取px值直接布局

- 使用插件直接将px转换成vw

使用rem+vw单位实现适配

沿用rem布局方案，所有的布局元素及属性都用rem做单位,用vw单位设置html的font-size,这样就不再需要JS来动态计算根元素字体大小。

```

换算过程:

假设在750px的设计稿下，可以理解为100vw,对应750px

沿用rem布局方案中的html{font-size:100px}换算为vw那么 1vw = 7.5px

100px就是13.333333vw了

```

然后我们就可以在布局写rem单位了, 由于倍率是100,除以100,直接小数点向左移动2位,1rem是100px,那么10px就是0.1rem，不需要借助插件转换计算也可以直观的进行布局了。