龙空技术网

承接上篇这里谈V(VW/VH/VM)单位的使用场景

小郑搞码事 161

前言:

今天看官们对“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宽度百分比