前言:
今天看官们对“js宽度百分比”大体比较注意,同学们都需要知道一些“js宽度百分比”的相关资讯。那么小编也在网络上汇集了一些关于“js宽度百分比””的相关资讯,希望我们能喜欢,看官们一起来了解一下吧!点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
通过上一篇的巴拉巴拉一堆讲解,我们对这几个单位有了一个认识。比如,兼容情况,干嘛用的......。
这篇我们专门来谈一下它的使用场景。前面三个场景都是现有方法可替代的,最后一个是V单位特有的(我觉得)。
场景一:分配空间
左右边框区域分别占用视窗的20vw和80vw。然而,由于块级元素它本身就有满屏特性,同时百分比也能取代它的这个作用。所以这种场景下使用v单位会显得有点多余。即不属于V单位独特的应用场景。
场景二:限制尺寸
有一种场景,大家估计都碰到过。当你要在屏幕上展示一张图片时, 各种尺寸的图片都希望展示完整的图片信息。这个时候我们会通过JS根据屏幕宽度+图片宽高进行各种计算来达到我们想要的目的。总结来说就是如何让一张图片在一屏内显示。
使用v单位纯CSS代码也能实现。类似于下面代码这样搞
(100vw代表100%的视窗宽度)
(100vh代表100%的视窗高度)
image{
max-width:90vw;
max-height:90vh;
}
因为v单位是相对于视窗大小来处理的。实际展示如下:
场景三:满屏平铺
V单位竟然是相对视窗来显示,那么很容易想到可以用来做满屏平铺,比如我们要搞一个背景满屏阴影遮罩的效果。
.parent{
height:100vh;
background:rgba(0,0,0,0.5);
}
上面由于块级元素是满屏特性,无需设置宽度。
这个效果也是有替代方案的,如高度100%,再如稍微处理后的fixed定位的元素。
【有没有发现,上面三个应用场景,其实用CSS现有的方法都是可以实现的。难道V单位都是多此一举吗?我再想一种场景,现有方法很难实现的。也许只有v单位才能搞】。
四、目前发现只有v单位能搞的场景
相对视窗满屏展示,又不脱离文档流,关键是纯CSS实现,如下效果:
关键代码是这样的:
.item{
width:100vw;
height:100vh;
}
最后小节:
关于V单位的使用场景就说到这里,如发现还有其它用途,可以与之分享。
标签: #js宽度百分比