css中vw与vh的区别是什么
vh 和vw和百分比区别
vw和vh的大小是相对于视口的宽度和高度。
而百分比是相指所占父元素的百分比。
**视口单位**
**在PC端,视口指的是在PC端,指的是浏览器的可视区域;**
而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。
在css中vw与vh的区别:vw单位可以根据窗口的宽度自动改变大小,“1vw”是窗口宽度的“1%”;vh单位可以根据窗口的高度自动改变大小,“1vh”是窗口高度的“1%”。
在css中,vw与vh的区别是:
vw单位可以根据窗口的宽度自动改变大小,1vw是窗口宽度的1%;
vh单位可以根据窗口的高度自动改变大小,1vh是窗口高度的1%;
vw是css的一个属性,和px,rem等类似,属于长度单位。在浏览器中, 1 vw = viewport 的宽度 /100
根据这个特性,vw 可以帮助我们实现移动端自适应布局,其优点在于所见即所得,甚至优于rem,因为完全不用使用额外的计算。
推荐和sass、less这种css预处理语言一起使用,因为其可以定义变量及函数,会在使用vw上提供巨大帮助。
vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:取当前Vw和Vh中较小的那一个值
vmax:取当前Vw和Vh中较大的那一个值
vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框。
示例如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>vh_CSS参考手册_web前端开发参考手册系列</title>
<style>
.p1{font-size:5vh;}
.p2{font-size:5vw;}
</style>
</head>
<body>
<p class="p1">相对于viewport高度大小的文字</p>
<p class="p2">相对于viewport宽度大小的文字</p>
</body>
</html>
需要注意的问题
vw(vh)或vmin(vmax)中默认的满屏是100,即100vw、100vh、100vmin、100vmax。但是100并不是屏幕的实际宽度,而是所在的容器的宽度。
比如电脑屏幕宽度是1920px,网页中的div宽度是1200px,此时100vw就是1200px而不是1920px;而高度100vh则指的是浏览器右侧出现滚动条的可见高度部分,
不包含浏览器地址栏、工具栏和底部的状态栏哦。
vw、vh、vmin、vmax是相对单位。相对于视窗(viewport)的大小,单位类似百分百。
视窗:浏览器实际应用内容区域。
vw:视窗宽度百分比;
vh:视窗高度百分比;
vmin:vw和vh中较小的值;
vmax:vw和vh中较大的值;
vmin、vmax应用:移动端开发时,可让横屏和竖屏下保持一致大小的尺寸。
相信坚持的力量,日复一日的习惯.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战