css3自适应布局单位vw,vh你知道多少？
视口单位(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: ;
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
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中自适应布局单位vh、vw
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
随机推荐
- 如何扩展分布式日志组件(Exceptionless)的Webhook事件通知类型？
写在前面 从上一篇博客高并发.低延迟之C#玩转CPU高速缓存(附示例)到现在又有几个月没写博客了,啥也不说,变得越来越懒了,懒惰产生了拖延后遗症. 最近一周升级了微服务项目使用的分布式日志组件Exce ...
- 从壹开始 [ Id4 ] 之一║ 授权服务器 IdentityServer4 开篇讲&计划书
前言 哈喽大家周四好!时间过的很快,现在已经是三月份了,我的 IdentityServer4 教程也拖了一定的时间了,正好最近有精力学新东西了,主要中间被小伙伴要求写一个管理后台,目前1.0已经上线( ...
- HTTP网络协议与手写Web服务容器
Http协议 1.深入概念 Http:HyperText Transfer Protocol,即是超文本传输协议. 2.浅出概念(使用浏览器访问服务器端网页时需要遵循的一系列规则) Http:将各种不 ...
- FreeSql 扩展包实现 Dapper 的使用习惯
简介 FreeSql.Connection.Extensions 这是 FreeSql 衍生出来的扩展包,实现(Mysql/postgresql/sqlserver/Oracle/SQLite)数据库 ...
- SLAM+语音机器人DIY系列：（六）SLAM建图与自主避障导航——2.google-cartographer机器人SLAM建图
摘要 通过前面的基础学习,本章进入最为激动的机器人自主导航的学习.在前面的学习铺垫后,终于迎来了最大乐趣的时刻,就是赋予我们的miiboo机器人能自由行走的生命.本章将围绕机器人SLAM建图.导航避障 ...
- LeetCode刷题专栏第一篇--思维导图&时间安排
昨天是元宵节,过完元宵节相当于这个年正式过完了.不知道大家有没有投入继续投入紧张的学习工作中.年前我想开一个Leetcode刷题专栏,于是发了一个投票想了解大家的需求征集意见.投票于2019年2月1日 ...
- 在阿里云服务器中用IP连接SQLserver2014提示40,53错误
在有些时候我们需要他人来连接我们的数据库,这个时候我们需要用我们本地的IP地址来连接,在连接的过程中可能会出现找不到网络路径提示40,53的错误 解决方案: 1.打开配置管理器 2.点开网络配置,点击 ...
- C# 接口的使用(工厂模式)
接口(interface)与抽象类(abstract)的区别: 相同点: 1.都不能被直接实例化,都可以通过继承实现其抽象方法. 2.都是面向抽象编程的技术基础,实现诸多模式 不同点: 1.接口可以多 ...
- 抽象工厂模式(Abstract Factory Pattern)
抽象工厂模式概述 定义:提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类 抽象工厂抽象工厂,顾名思义,就是比工厂模式更抽象的工厂模式.在工厂模式中,一个具体工厂只负责生产一个具体产品 ...
- [20190130]删除tab$记录的恢复.txt
[20190130]删除tab$记录的恢复.txt --//网上提到许多删除tab$的案例,主要原因在于没有从官方正规渠道下载oracle版本,还有一些来自工具里面带有一些脚本删除tab$记录. -- ...