vh和vw单位

作者: siberiawolf0307 | 来源:发表于2018-11-24 00:01 被阅读10次
vw = view width

vh = view height

这两个单位是CSS3引入的,以上称为视口单位允许我们更接近浏览器窗口定义大小。

视口单位(Viewport units)

Q:什么是视口?
A:Peter-Paul Koch(”PPK大神”)提出视口的解释是:

在桌面端,指的是浏览器的可视区域;在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。

视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

vh/vw与%区别

单位 解释
vw 1vw = 视口宽度的1%
vh 1vh = 视口高度的1%
vmin 选取vw和vh中最小的那个
vmax 选取vw和vh中最大的那个

比如:浏览器视口尺寸为370px,那么 1vw = 370px * 1% = 6.5px(浏览器会四舍五入向下取7)

vh/vw与%区别在于

单位 解释
% 元素的祖先元素
vh/vw 视口的尺寸

参考文章vh,vw单位你知道多少?

相关文章

  • CSS新增单位

    CSS3 新增的单位:**vh、vw、vmin、vmax** * vw 和 vh 1、1vw 等于1/100的...

  • css3 尺寸

    1,vw、vh、vmin、vmax 的含义 (1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它...

  • vh和vw单位

    这两个单位是CSS3引入的,以上称为视口单位允许我们更接近浏览器窗口定义大小。 视口单位(Viewport uni...

  • css3 vw/vh rem em

    1. vw/vh vw:1vw等于视口宽度的1%vh:1vh等于视口高度的1%vh和vw是相对于适口的高度和宽度,...

  • css实现自适应正方形

    方法一:使用 CSS3 的 vw,vh 单位 用 vw 或 % 单位设置宽度,用 vw 单位设置相同高度即可; 用...

  • 【转】css3中的width:100vh以及calc(100vh

    vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为1...

  • vue项目中使用vw/vh

    vw/vh这个单位可以根据电脑浏览器自适应vw —— 视口宽度的 1/100;vh —— 视口高度的 1/100 ...

  • 自适应布局 — VW、VH

    vh vw 是css一种新的长度单位 vh -- 视口高度被均分为100单位的vh,即 1vh == 1%视口高度...

  • css3 vh and vw

    1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的1%。 3.vmin:选取vw和vh中最...

  • 利用vw+rem进行移动多终端布局

    根据CSS3规范,视口单位主要包括以下4个: vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度...

网友评论

    本文标题:vh和vw单位

    本文链接:https://www.haomeiwen.com/subject/hdfeqqtx.html