在css3中,vh和vw是视口单位,是相对长度单位。
文章目录
- 前言
- 一、视口单位( Viewport units )
- 1.在pc端
- 2.在移动端
- 二、常见单位及使用
- 1.常见单位
- 2.使用
前言
提示:以下所有内容,仅为个人经验总结,非专业解释
在学习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配合使用,就会使页面布局更为优化,改善使用体验感。