本篇文章主要介绍了"关于响应式开发布局的一点心得vw,vh的利用"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
很多人肯定都想知道响应式开发布局的原理吧。在这里我粗略讲一讲，一种非常简单却又实用的开发心得。主要就是两个单位vh,vw。vh：把浏览器的视图窗口的高分成一百份...
很多人肯定都想知道响应式开发布局的原理吧。
在这里我粗略讲一讲，一种非常简单却又实用的开发心得。
主要就是两个单位vh,vw。
vh：把浏览器的视图窗口的高分成一百份；
vw：把浏览器的视图窗口的宽分成一百份；
也就是说，开发的时候只要用法这两个单位为各种便签赋值就可以了。
聚个简单的例子:
正常情况，一般人习惯
设置背景色，是为了更好看到颜色变化
那么这个块无论在多大分辨率的屏幕上占的宽度高度始终是100px;
但是如果我们这样写
关键的地方就来了，即使屏幕分辨率一定。
浏览器窗口的大小也会让这个块自动变化。
假设浏览器全屏 ，视图窗口中的高宽为1000px;
那么此时块的高宽大小为 10/100 * 1000 px = 100px;
也就是说此时浏览器中块的高宽为100px;
接着我们拖动浏览器变小，让浏览器的中视图窗口高度为500px;
那么此时块的高宽大小为 10/100 * 500 px = 50px;
vw的原理和vh是一样的。
当窗口大小发生变化或者屏幕分辨率发生变化的时候。
用vh,vw为单位的标签的宽和高会接收到分辨率变化的信息，自动进行自适应。一定程度上就实现了响应式布局。
注意：vh,vw不是把屏幕大小分成100份，而是把浏览器中的可视区域分成100份！所以即使屏幕分辨率不变化，浏览器窗口大小发生变化，也会实现动态响应
以上就介绍了关于响应式开发布局的一点心得vw,vh的利用，包括了方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_541271.html
