css中的视窗单位

最新推荐文章于 2022-12-13 16:57:06 发布

charlene程程

最新推荐文章于 2022-12-13 16:57:06 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css 单位

本文链接：https://blog.csdn.net/charlene0824/article/details/51178218

版权

css 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

视窗单位

视窗是浏览器实际显示内容的区域–换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表到了浏览器尺寸的比例和窗口的大小调整产生的规模改变。

比如有一个1000px（宽）和800px（高）的视窗（viewport）

vw–代表视窗（viewport）的宽度为1%，当宽度为1000px时，50vw=500px
vh–窗口高低的百分比 50vh=400px。
vmin–vmin的值是当前vw和vh中较小的值。50vmin=400px。
vmax–大尺寸的百分比。50vmax=500px。

可以在任何一个可以使用像素值的地方使用它们，比如width、height、margin、font-size等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值

占用页面的总体高度

当需要占用页面总体高度时，通常如下设计

#elem{
    height:100%;
}

然而，除非我们为html和body添加100%的高度，但只是这样还是不行，因为这样的代码并不优雅而且很有可能会破坏设计的其余部分，使用vh和vw就变得相当容易了，只需要为高度设置100vh，那它将永远都是窗口的高度

#elem{
    height:100vh;
}

这样会生成完美的全屏图像。

阿里有一个笔试题要求将body中的三个div元素横向平铺并平分屏幕，纵向充满整个屏幕。所给的html如下：

<body>
<div></div>
<div></div>
<div></div>
</body>

实现方法:

body{
margin:50px;
background-color:#2C3437;

height:100%;
} 

 div{
    float:left;
    height: 100vh;
    width:33%;
    border:1px solid #FF6699;
    position:relative;
    overflow:auto;  
}

子元素根据浏览器改变而不是父元素

在某些情况下，我们需要的是子元素的大小相对于窗口改变而不是父元素。我们可以使用vw来设置子元素，那么它会简单的溢出并采取网页的全宽

#pargent{
    width:400px;
    height:500px;
}
#child{
    width:100vw;
    height:300px;
}

这里写图片描述

响应字体大小

视窗单位也可以在文本中使用。在这个例子中我们使用vw设置字体大小来创建一行css响应式文字

#pargent{
    width:400px;
    height:500px;
    font-size:4vw;
}
#child{
    width:100vw;
    height:300px;
    font-size:2vw;
}

文字的大小根据视口宽度的变化而显示不同的大小

响应垂直居中

通过设置元素的width、height和margin的视窗单位，可以不使用任何其他技巧来设置居中

这里有一个高度为60vh，上下外边距为20vh的矩形，它们加起来是100vh（60+2*20），使它即便调整窗口大小也可以始终居中。

#parent{
    width:60vw;
    height:60vh;
    margin:20vh auto;
    }

这里写图片描述

参考文献：CSS中如何使用视窗单位

charlene程程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的视窗单位

视窗单位视窗是浏览器实际显示内容的区域–换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表到了浏览器尺寸的比例和窗口的大小调整产生的规模改变。比如有一个1000px（宽）和800px（高）的视窗（viewport）vw–代表视窗（viewport）的宽度为1%，当宽度为1000px时，50vw=500pxvh–窗口高低的百分比 50vh=400px
复制链接

扫一扫