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。
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 内核中也得到完美的全面支持)
转载自
https://www.cnblogs.com/luxiaoxing/p/7544375.html
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你知道多少？
原文地址: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浏览器私有属性前缀使用详解
什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -m ...
随机推荐
- 痞子衡嵌入式：飞思卡尔i.MX RTyyyy系列MCU特性那些事（1）- 概览
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的基本特性. ARM Cortex-M微控制器芯片厂商向来竞争激烈,具体可参看我的另一篇文章&l ...
- 【LeetCode】6. Z 字形变换
题目 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C ...
- InnoSetup 根据选择的安装语言显示不同语言的（协议）License和更新说明
需求 在安装时,选择中文安装,显示中文版协议(License)文件. 在安装时,选择英文安装,显示英文版协议(License)文件. 解决 [Languages] 段中有LicenseFile属性和I ...
- 【Visio流程图】借助redis来实现数据即时刷新
[需求:]数据从竞品网站爬过来,经过分析处理之后,把结果通过网页实时反馈给业务人员. [应用:]2个应用: 一个是爬取数据的应用:不断从竞品网站爬数据,每次爬到的数据为一批.然后,对每一批爬到的数据进 ...
- 记一次微信小程序的开发
使用工具: 1.微信Web开发者工具 2.Visual Studio 2019 前端采用color UI,后端采用c# .net 过程中的几个重点点记录 1.color UI使用 下载colorUI以 ...
- Windows下使用PuTTY连接Centos7、Linux系统目录结构、一些操作命令
PuTTY可以远程管理Linux.PuTTY官网:https://www.putty.org/ 一.使用PuTTY连接Centos7 下载安装后,打开如下图: 1.输入主机名或IP地址2.端口号默认2 ...
- 【JDBC】JDBC入门
JDBC的入门 搭建开发环境 编写程序,在程序中加载数据库驱动 建立连接 创建用于向数据库发送SQL的Statement对象 从代表结果集的ResultSet中取出数据 断开与数据库的连接,并释放相关 ...
- 实际场景：UI、原型与实际不符；研发怼你，你要怎么办？-Dotest软件测试
实际公司场景:UI.原型与实际不符:你提交的问题(bug),开发又开始怼你,遇到这种情况,你会怎么办?怎么沟通?(如下图) 解释:大部分公司都是这样,区别在于差异性有多大:做出来的东西大部分与设计.原 ...
- 《Web Development with Go》实现一个简单的rest api
设计模式完了之后,应该实现具体的应用了. 设计模式还得没事就要复习. web应用,学习的是网上的一本书. <Web Development with Go> package main im ...
- 三、ITK的dcm图像读写
一.主要功能 1.读取单张dcm图像 2.写入单张dcm图像 3.图像调整之后以.jpg格式写入 4.调整之后重新以.dcm格式写入 二.代码 #include "itkImageFileR ...