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。
```
![img](wps2.jpg)
使用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,不需要借助插件转换计算也可以直观的进行布局了。