Web移动端第六天

一、vw和vh

1.vw全称viewport width,意思是可视窗口的宽度.

vw和之前的rem一样也是相对单位,rem相对的是html的字体大小,而vw相对的是屏幕大小计算结果.

1vw就是1/100的视口宽度.

2.vh全称是viewport height,意思是可视窗口的高度

1vh是1/100的视口高度.

注意:因为屏幕宽高的不同,在平时的开发中我们一般宽高都适用vw,vw和vh尽量不一起使用,一起使用会导致盒子变形.

因为vw是相对屏幕大小计算结果的,所以在开发中不需要再通过媒体查询进行适配,vw本身就可以进行适配.

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

 

二、响应式原理

响应式原理:通过媒体查询检测屏幕宽度,在不同的设备下,让盒子宽度发生变化,改变布局方式.

标签：Web,vh,适配,第六天,宽度,vw,屏幕,移动
来源： https://www.cnblogs.com/wyy-010818/p/16515295.html