CSS3新单位vw,vh,vmin,vmax详解

1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案;

vw:view width(视窗宽度)的百分比,1vw代表视窗宽度的1%;

vh:view height(视窗高度)的百分比,1vh代表视窗高度的1%;

vmin:当前视窗宽度vw和视窗高度vh中较小的一个值;

vmax:当前视窗宽度vw和视窗高度vh中较大的一个值;

2,与百分比的区别:

(1)%是相对于父元素的大小设定的,而vw,vh是由视窗大小决定的。

(2)vw,vh优势在于能够直接获取高度,而%则在没有设定body的高度情况下,是无法正确获取可视区域的高度的,所以css3加入新单位是方便开发者的选择。

3,vmin,vmax的用处:

做移动页面开发时,如果使用vw,vh设置字体大小(例如10vw),在竖屏和横屏状态下显示字体大小是不一致的,而vmin,vmax是当前vw和vh中,较小值和较大值,这里就可以使用vmin和vmax,使得文字在横竖屏下面显示一致。

4,浏览器兼容性:

5,应用:

比如,弹出框大小随内容自适应;显示大图石限制其最大尺寸;实现Word文档页面效果(使用vh单位,一屏正好一页,改变浏览器窗口大小,页面大小随之变化)等。

 

【完】

新年flag2——每天走8000步,一个月走8000*30=24W步,一万步大约7KM,那么24*7=168公里,小米手环/手机打卡。

 

猜你喜欢

转载自www.cnblogs.com/tangjiao/p/10362711.html
0条评论
添加一条新回复