vh和vw是什么单位?

news/2024/11/8 16:50:49/

在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配合使用,就会使页面布局更为优化,改善使用体验感。


http://www.ppmy.cn/news/583751.html

相关文章

VIM for windows

普通人的编辑利器——VIM (for windows) 2007年03月21日 星期三 下午 04:43 FROM linxuelin 2005年5月,我开始用VIM。此后渐入佳境,原来因版权自律而放弃盗版UltraEdit的遗憾一扫而空。并且,从VIM我才体会到,什么才是真正的编辑利…

再争万兽之王 狮子VS老虎谁更凶猛?(图)

http://tech.163.com 2005-09-20 10:36:19 来源: 网易科学    网友评论 512 条 世人公认的两种最厉害的猫科动物是狮子和老虎。但是它们相比哪个更厉害?这个问题大家都感兴趣,而且众说纷纭,那么我今天就来详细地说一说吧。 世界上现存的…

明朝历代皇帝简介

>>明太祖朱元璋 明太祖朱元璋(1328~1398),字国瑞,明朝的开国皇帝,濠州人。 朱元璋生在一个普通农民的家庭,17岁那年,家乡流行瘟疫,他的父母及兄长都在这场灾难中死去&#xf…

波士顿科学完成从霸菱亚洲收购科医人外科业务;刘孟元博士加盟克睿基因 | 医药健闻...

| 行业焦点 波士顿科学完成从霸菱亚洲收购科医人外科业务。波士顿科学宣布完成了从霸菱亚洲(BPEA)的关联公司收购科医人(Lumenis LTD.)全球外科业务,后者是一家致力于能量医疗解决方案研发与商业化的私营企业。科医人外科业务包括用于泌尿外科和耳鼻喉科手术的卓越的…

确立自己的思想

之前曾经写到过,应该确立自己的理论体系。其实这个理论体系,不仅应该包括自己的知识体系,还包括对于这个世界的最根本态度。这个态度,应该被称之为思想。 确立自己的思想,是对世界的一种态度,对你存在于时空…

weigm怎么下载_weigm.cn

竞价说明: 1、出价需冻结出价金额的20%作为保证金,出价被超出时自动解冻。 2、竞价结束前的5分钟内,为了保证公平,如有新的出价,则自动延时0-10分钟,直至无新的出价为止。 3、由于实际结束时间有波动&#…

九龙证券|科技股竟成避风港!3月份恒生科技指数领跑全球

3月份欧美多家银行迅速关闭,引发了全球金融安稳性问题,却意外带来了全球科技股的狂欢。 据Wind数据统计,3月份,恒生科技指数再次成为全球金融商场的领先目标,涨幅到达9.65%,A股科创板50指数3月大涨9.19%&a…

人间正道是沧桑

人间正道是沧桑 《戏说乾隆》 简 评 电视连续剧《戏说乾隆》是一部观赏性很强,融历史、言情、武打于一炉的精良之作。该剧通过乾隆皇帝的三次微服出巡,叙述了乾隆皇帝在探访民情、端正风 俗、整治贪顽的过程中,邂逅三位民间女子的爱情传…