588创业论坛

 找回密码
 快速注册
搜索
查看: 823|回复: 0
打印 上一主题 下一主题

css3 html5自适应布局元素大小单位vw、vh详解

[复制链接]
匿名
跳转到指定楼层
1
匿名  发表于 2020-3-13 17:13:53 |倒序浏览
视口单位(Viewport units)

什么是视口?

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

视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。

根据CSS3规范,视口单位主要包括以下4个:

      1.vw:1vw等于视口宽度的1%。

      2.vh:1vh等于视口高度的1%。

      3.vmin:选取vw和vh中最小的那个。

      4.vmax:选取vw和vh中最大的那个。

vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

1.jpg


vh/vw与%区别

2.jpg

请看下面简单的例子:
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>VW&VH</title>
  8. </head>
  9. <style>
  10.     * {
  11.         padding: 0;
  12.         margin: 0
  13.     }

  14.     .left {
  15.         float: left;
  16.         width: 50vw;
  17.         height: 20vh;
  18.         background-color: blue;
  19.         text-align: center;
  20.         line-height: 20vh;
  21.         font-size: 3vh;
  22.     }

  23.     .right {
  24.         float: right;
  25.         width: 50vw;
  26.         height: 20vh;
  27.         background-color: green;
  28.         text-align: center;
  29.         line-height: 20vh;
  30.         font-size: 3vw;
  31.     }
  32. </style>

  33. <body>
  34.     <div class="left">left</div>
  35.     <div class="right">right</div>
  36. </body>

  37. </html>
复制代码
兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持)
您需要登录后才可以回帖 登录 | 快速注册

Archiver|手机版|588创业网 ( 闽ICP备08003622号-6 )

GMT+8, 2024-12-23 09:27 , Processed in 0.156078 second(s), 27 queries .

Powered by bbs.588cy.com

© 2001-2012 Discuz! X2.5

回顶部