[转]css3自适应布局单位vw,vh你知道多少？
原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html
视口单位(Viewport units)
什么是视口？
在PC端，视口指的是在PC端，指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
根据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。
vh/vw与%区别
请看下面简单的栗子：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VW&VH</title>
</head>
<style>
* {
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
}
</style> <body>
<div class="left">left</div>
<div class="right">right</div>
</body> </html>
兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持)
[转]css3自适应布局单位vw,vh你知道多少？的更多相关文章
- css3自适应布局单位vw,vh
css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...
- css3自适应布局单位vw,vh你知道多少？
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- H5_0025：css3自适应布局单位vw,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- CSS3自适应字体大小(vw vh)
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...
- css---【vw,vh】进行自适应布局单位
在进行CSS3自适应布局,会用到 vw 和 vh 进行布局 视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:L ...
- 视区相关单位vw, vh..简介以及可实际应用场景
这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...
- 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭
一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...
- Css3中自适应布局单位vh、vw
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
随机推荐
- day 07 预科
目录 异常处理 字符串内置方法 1.索引取值 2.切片 3.成员运算 4.for循环 5.len() 6.strip(): 默认去掉两端空格 7.lsteip()/rstrip(): 去左端/右端 空 ...
- Linux 应用程序的安装和管理
在Linux中,有三种安装软件的方式,分别是RPM包安装.YUM源安装.源代码编译安装. 常见应用程序目录结构 类型 路径 普通用户可执行文件 /usr/bin 管理员可执行文件 /usr/sbin ...
- 【Docker】iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8480 -j DNAT --to-destination 172.17.0.2:80 ! -i docker0: iptables: No chain/target/match by that name
启动容器的时候,出现如下错误: Error response / --dport -j DNAT --to-destination ! -i docker0: iptables: No chain/t ...
- Linux系统自动化安装之cobbler实现
一.cobbler简介 cobbler是快速网络安装linux操作系统的服务,支持众多的Linux发行版本,如redhat|.fedora.centos.debian.ubuntu和suse,也可以支 ...
- python编程之字符bytes转换str问题
之前学习bytes转换str的时候,场景比较简单,这次是python中使用subprocess模块输出Linux下的执行命令的结果,默认是bytes类型,因此输出的结果并不是我们想要的,bytes的输 ...
- Codeforces Round #555 (Div. 3) F. Maximum Balanced Circle
F. Maximum Balanced Circle 题目链接 题意 给出\(n\)个数,现在要从中选出最多的数\(b_i,b_{i+1},\cdots,b_k\),将这些数连成一个环,要求两两相邻的 ...
- 小程序~列表渲染~key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容, <switch/> 的选中状态),需要 ...
- 通过iptables限制docker容器端口
如何限制docker暴露的对外访问端口 docker 会在iptables上加上自己的转发规则,如果直接在input链上限制端口是没有效果的.这就需要限制docker的转发链上的DOCKER表. # ...
- Laravel —— batch 实现
很多项目中会用到自动执行脚本的功能, 例如,自动统计上个月的注册用户,定时生成 csv 文件并邮箱发送给客户等等. Laravel 中的任务调度,可实现定时任务, 结合自定义 artisan 命令,即 ...
- java项目部署
本文章只为帮助大家学习项目的发布,为基础篇,在此给大家示范在window环境下的项目部署及运维. 以下版本为讲解示例,可自行改至匹配版本. 服务器:window service2008 R2 Stan ...