css3自适应布局单位vw,vh
css3自适应布局单位vw,vh
一、总结
一句话总结：
vw和vh都是视图单位，分别为视图宽高的1%
1、vh/vw与%区别？
%是相对于父元素，vh和vw是相对于视图高宽
% 百分比，相对长度单位，相对于父元素的百分比值
vh和vw相对于视口的高度和宽度
二、css3自适应布局单位vw,vh你知道多少？
转自或参考：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与%区别
%是相对于父元素，vh和vw是相对于视图高宽
% 百分比，相对长度单位，相对于父元素的百分比值
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: ;
margin:
} .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你知道多少？
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- [转]css3自适应布局单位vw,vh你知道多少？
原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的 ...
- 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 ...
随机推荐
- python使用tkinter无法获取输入框的值
如果遇到:使用tkinter无法获取输入框Entty()的值的问题,需要检查一下,是否在定义Entry()时立即进行了pack() 会出现使用entryname.get()报错 解决方法:把定义和pa ...
- Win10-安装.net 2,3,.3.5
win10x64(ver1809).iso放镜像到光驱后执行cmd(.net3.5包括2和3)dism.exe /online /enable-feature /featurename:NetFx3 ...
- c# 常见文件夹操作
- Linux命令——lspci
参考:7 Linux lspci Command Examples to Get PCI Bus Hardware Device Info 简介 lspci可以看成“ls” + “pci”.lspci ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- 移动魔百和PTV-8098可以免拆直接安装第三方的软件
前言:江苏用户的福音啊!当地移动魔百和PTV-8098可以免拆直接安装第三方的软件,其他地区的PTV-8098未做测试,可以自己根据教程步骤进行测试: 准备工具:8G或4G的U盘(太大无法识别).电脑 ...
- 【独家】K8S漏洞报告 | CVE-2019-1002101解读
kubectl cp漏洞CVE-2019-1002101分析 Kube-proxy IPVS添加flag ipvs-strict-arp 近期bug fix数据分析 ——本期更新内容 kubectl ...
- JDK源码那些事儿之ConcurrentLinkedQueue
阻塞队列的实现前面已经讲解完毕,今天我们继续了解源码中非阻塞队列的实现,接下来就看一看ConcurrentLinkedQueue非阻塞队列是怎么完成操作的 前言 JDK版本号:1.8.0_171 Co ...
- 《BUG创造队》作业8：软件测试与Alpha冲刺（第二天）
项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 实验十二 团队作业8:软件测试与ALPHA冲刺 团队名称 BUG创造队 作业学习目标 (1)掌握软件测试基础技术.(2)学习 ...
- 阿里云 Windows Server 2012 密码过期设置
不加入域的情况下: 1.服务器管理器>工具>本地安全策略>账户策略>密码策略>密码最长使用期限(修改为0天)或者禁用密码复杂度要求 参考:https://blog.csd ...