资讯专栏INFORMATION COLUMN

视窗单位-vw/vh/vmin/vmax

luck / 2186人阅读

摘要:视窗单位含义是一种视窗单位,是由视窗的大小决定的。视窗是浏览器实际显示内容的区域包含滚动条,不包括工具栏和按钮的网页浏览器。

视窗单位含义:

vw、vh、vmin、vmax是一种视窗单位,是由视窗(Viewport)的大小决定的。
视窗是浏览器实际显示内容的区域包含滚动条,不包括工具栏和按钮的网页浏览器。

vw/vh/vmin/vmax

vw 相对于视窗的宽度:视窗宽度100vw

vh相对于视窗的高度:视窗高度100vh

vmin/vmax:vw、vh中较小/大的值

视窗单位与百分比

百分比是相对于父元素的大小设定的比例,视窗单位是由视窗大小决定的

视窗单位vh可以直接获取可视区域的高度,而百分比是不可以的

100vw包含滚动条,100%不包含滚动条

综上所述,1vw ≈ 1%

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117094.html

相关文章

  • 从头开始 — CSS — 垂直居中

    摘要:基于特有的属性拥有内联元素的特性同时可以定义宽高,我们可以设置一个行内块用于定义高度,再让其他内联元素与其对齐,实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时,不仅在水平方向上将元素居中,垂直方向上也是如此。 事实上,每次面试前端必问的问题就是这个。及其常见的需求,看起来似乎非常简单,但是实现起来很费劲,尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块...

    wuaiqiu 评论0 收藏0
  • 从头开始 — CSS — 垂直居中

    摘要:基于特有的属性拥有内联元素的特性同时可以定义宽高,我们可以设置一个行内块用于定义高度,再让其他内联元素与其对齐,实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时,不仅在水平方向上将元素居中,垂直方向上也是如此。 事实上,每次面试前端必问的问题就是这个。及其常见的需求,看起来似乎非常简单,但是实现起来很费劲,尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块...

    NoraXie 评论0 收藏0
  • WEB前端资源代码:CSS篇

    摘要:误区注意只是动态分配父元素的剩余空间,而不是整个父元素的空间。默认值如果项目未设置高度或设为,将占满整个容器的高度。负值对该属性无效。高像素密度设备相应放大,像素密度设备相应缩小。css3新单位vw、vh、vmin、vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那...

    番茄西红柿 评论0 收藏0
  • 好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么?

    摘要:如字体页面推荐的那样,把下面这段代码在添加到页面标签内,即可嵌入相应的字体。但这还不是我们要的效果。它相对的不是父节点或者页面的根节点。而是由视窗大小来决定的,单位,代表视窗的。具体请看属性用来设置如何处理元素中的空白。 showImg(http://www.googlefonts.net/); 效果: 根据给出的两个连续颜色,玩家需要猜出下一个是什么颜色 随机关卡 使用vw,vh,...

    robin 评论0 收藏0
  • 好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么?

    摘要:如字体页面推荐的那样,把下面这段代码在添加到页面标签内,即可嵌入相应的字体。但这还不是我们要的效果。它相对的不是父节点或者页面的根节点。而是由视窗大小来决定的,单位,代表视窗的。具体请看属性用来设置如何处理元素中的空白。 showImg(http://www.googlefonts.net/); 效果: 根据给出的两个连续颜色,玩家需要猜出下一个是什么颜色 随机关卡 使用vw,vh,...

    YancyYe 评论0 收藏0

发表评论

0条评论

luck

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<