关于响应式开发布局的一点心得(vw,vh的利用)

很多人肯定都想知道响应式开发布局的原理吧。

在这里我粗略讲一讲，一种非常简单却又实用的开发心得。

主要就是两个单位vh,vw。

vh：把浏览器的视图窗口的高分成一百份；

vw：把浏览器的视图窗口的宽分成一百份；

也就是说，开发的时候只要用法这两个单位为各种便签赋值就可以了。

聚个简单的例子:

正常情况，一般人习惯<div style = "width:100px;height:100px;background:red;"></div>

设置背景色，是为了更好看到颜色变化

那么这个块无论在多大分辨率的屏幕上占的宽度高度始终是100px;

但是如果我们这样写<div style = "width:10vw;height:10vh;background:red;"></div>

关键的地方就来了，即使屏幕分辨率一定。

浏览器窗口的大小也会让这个块自动变化。

假设浏览器全屏 ，视图窗口中的高宽为1000px;

那么此时块的高宽大小为   10/100  * 1000  px  =  100px;

也就是说此时浏览器中块的高宽为100px;

接着我们拖动浏览器变小，让浏览器的中视图窗口高度为500px;

那么此时块的高宽大小为   10/100  * 500  px  =  50px;

vw的原理和vh是一样的。

当窗口大小发生变化或者屏幕分辨率发生变化的时候。

用vh,vw为单位的标签的宽和高会接收到分辨率变化的信息，自动进行自适应。一定程度上就实现了响应式布局。

注意：vh,vw不是把屏幕大小分成100份，而是把浏览器中的可视区域分成100份！所以即使屏幕分辨率不变化，浏览器窗口大小发生变化，也会实现动态响应