【css3】vh和vw是什么单位?

css3中,vh和vw是视口单位,是相对长度单位。

前言
提示:以下所有内容,仅为个人经验总结,非专业解释

在学习css时,除了px像素,我们还经常遇到vh和vw这两个单位,那这两个单位具体是什么呢,怎么使用呢?

一、视口单位( Viewport units )
想了解vh和vw,首先我们需要知道什么是视口。顾名思义,视口即为可视窗口。
分两种情况:

1.在pc端
视口指:pc端中,浏览器的可视区域;

2.在移动端
移动端的视口分三种:Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport(理想视口);这三个视口的区别不多赘述,这里指的是Layout Viewport(布局视口)。

二、常见单位及使用
1.常见单位
常见视口单位主要包括以下4个:

vw : 相对于视口的宽度,1vw 等于视口宽度的1%(总视口宽度为100vw)
vh : 相对于视口的高度, 1vh 等于视口高度的1%(总视口高度为100vh)
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
提示:横屏时要交换视口单位哦~
2.使用
一般情况下,如果我们仅使用px或rem、em时,会在窗口缩放时,有一些卡顿等小瑕疵影响体验,所以如果可以用rem和vw配合使用,就会使页面布局更为优化,改善使用体验感。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值