css单位vw vh,css3自适应布局单位vw,vh详解

视口单位(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。

image

vh/vw与%区别

image

请看下面简单的栗子：

VW&VH

* {

padding: 0;

margin: 0

}

.left {

float: left;

width: 50vw;

height: 20vh;

background-color: blue;

text-align: center;

line-height: 20vh;

font-size: 3rem

}

.right {

float: right;

width: 50vw;

height: 20vh;

background-color: green;

text-align: center;

line-height: 20vh;

font-size: 3rem

}

left

right

兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持)

image

转自 https://www.cnblogs.com/jiajialove/p/10833305.html

css单位vw vh,css3自适应布局单位vw,vh详解相关推荐

css3自适应布局单位vw,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
css3自适应布局单位vw,vh你知道多少？
视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域: 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual V ...
[css] rem是如何实现自适应布局的？
[css] rem是如何实现自适应布局的? 其大小与设置的html根大小相对通过js获取当前页面的宽度,动态的调整 html{ font-size: 5px; } 来改变整个页面对应的字体大小个人 ...
css动画定义,css3的动画(animation)属性的详解（附代码）
本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css3动画(animation)具有以下属性: ...
Java Swing布局管理器（详解版）
在使用 Swing 向容器添加组件时,需要考虑组件的位置和大小.如果不使用布局管理器,则需要先在纸上画好各个组件的位置并计算组件间的距离,再向容器中添加.这样虽然能够灵活控制组件的位置,实现却非常麻烦 ...
android 图片横竖判断_Android横竖屏切换及其对应布局加载问题详解
本文为大家分享了Android横竖屏切换及其对应布局加载问题,供大家参考,具体内容如下第一,横竖屏切换连带横竖屏布局问题: 如果要让软件在横竖屏之间切换,由于横竖屏的高宽会发生转换,有可能会要求不同 ...
CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里简化版完整实例 CSS3扇形动画菜单 *{padding: ...
html中overflow是什么标签,CSS中Overflow的属性是什么？Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...

css单位vw vh,css3自适应布局单位vw,vh详解

css单位vw vh,css3自适应布局单位vw,vh详解相关推荐

最新文章

热门文章