这篇文章将为大家详细讲解有关“CSS3中vh表示什么是，与vw有何不同”的知识，下文有详细的介绍，小编觉得挺实用的，对大家学习或工作或许有帮助，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1/100的视口宽度。

在客户端，视口指的是浏览器的可视区域；

而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。指的就是Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

vh单位可以根据窗口的高度自动改变大小，1vh是窗口高度的1%；

vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。

扩展知识：

vw: 视口宽度的百分比（1vw 等于视口宽度的 1%）

vh: 视口高度的百分比（1vh 等于视口高度的 1%）

vmin: 选取 vw 和 vh 中最小的那个

vmax: 选取 vw 和 vh 中最大的那个

vw、vh 是基于视口的，而不是父元素。1vw 等于1/100 的视口宽度，1vh 等于1/100 的视口高度，比如：

浏览器高度 950px，宽度为 1920px, 1vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px

vw、vh、％ 的区别

％ 是相对于父元素的大小设定的比率，vw vh 是视口大小决定的

vw、vh 能直接获取高度，而 ％ 如果没有设置body的高度情况下，是无法获取可视区域的高度。

现在大家对于CSS3中vh表示什么是，与vw有何不同的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• css写动态圆点发光效果代码

  使用css我们能够实现很多酷炫有趣的动态效果，这篇文章就给大家分享用CSS3来实现动态发光的圆圈效果，明白css动态圆点的实现，我们还能够举一反三，实现星星发光效果等等。下面是动态发光的圆圈效果，感兴趣的朋友就继续往下看吧。

• CSS样式无法起效的原因怎样排查

  在写页面时，有时会发现自己写的css样式无法生效，我们该如何排查css样式无法生效？常见的css样式不起作用的原因有哪些呢？下面我们就来看一下css样式不起作用的原因。排查css样式

• CSS中引入方式有几种，引入的优先级是怎样

  这篇文章主要介绍了CSS中的4种引入方式及优先级，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

• CSS中将表格的内边框颜色设置透明的方法是什么

  在css中，可以利用border属性去掉表格的内边框颜色，只需要将单元格的边框颜色设置为透明色即可，当border属性的值为transparent时，元素的边框颜色会为透明色，语法为“单元格元素{border:transparent;}”。

• 用CSS3怎样做一个简易的旋转动画效果？

  这篇文章给大家分享的是用CSS3做一个简易的旋转动画效果。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。