css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
height:100vh
一些只能vw, vh才能完成的应用场景：
1. 场景之：元素的尺寸限制
vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图
原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。
这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。
但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？
CSS代码：
.vw_vh_img {
max-width: 90vw;
max-height: 90%;
max-height: 90vh;
}
HTML代码：
<img src="http://ww3.sinaimg.cn/large/61ecbb3djw1dx4hai2ggnj.jpg" class="vw_vh_img" />
2. CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面
3. 视区覆盖以及边界定位
vh确实是相对于屏幕的，但默认body有一个margin，100%加上这个margin就超出了就会出现滚动条。清除body的margin即可。
body{margin:0;}
=====================
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。
2.rem
这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
参照后面给的demo
3.vh
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
4.vw
vw就是当前屏幕宽度的1%
补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<title>恭贺新春</title>
</head>
<style type="text/css" media="screen">
html{
font-size: 14px;
}
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
font-size: 1.2em;
}
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
font-size: 1.2rem;
}
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
}
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
}
</style>
<body>
<h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
<div class="em">
字体大小 1.2 * 14（父元素body） = 16px
<div class="em-son">
字体大小 1.2 * 16(父元素em) = 20px
<div class="em-grandson">
字体大小 1.2 * 20(父元素em-son) = 24px
</div>
</div>
</div>
<br>
<h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
<div class="rem">
字体大小 1.2 * 14（根节点html） = 16px
<div class="rem-son">
字体大小 1.2 * 14（根节点html） = 16px
<div class="rem-grandson">
字体大小 1.2 * 14（根节点html） = 16px
</div>
</div>
</div>
<br>
<h1>rem 也可作为固定长度单位设置宽高等</h1>
<div class="rem-box">
宽：14 * 10 = 140px<br>
高：14 * 10 = 140px
</div>
<br>
<h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
<div class="vhvw-box">
宽：屏幕宽度的50%<br>
高：屏幕高度的50%
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<title>恭贺新春</title>
</head>
<style type="text/css" media="screen">
html{
font-size: 14px;
}
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
font-size: 1.2em;
}
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
font-size: 1.2rem;
}
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
}
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
}
</style>
<body>
<h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
<div class="em">
字体大小 1.2 * 14（父元素body） = 16px
<div class="em-son">
字体大小 1.2 * 16(父元素em) = 20px
<div class="em-grandson">
字体大小 1.2 * 20(父元素em-son) = 24px
</div>
</div>
</div>
<br>
<h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
<div class="rem">
字体大小 1.2 * 14（根节点html） = 16px
<div class="rem-son">
字体大小 1.2 * 14（根节点html） = 16px
<div class="rem-grandson">
字体大小 1.2 * 14（根节点html） = 16px
</div>
</div>
</div>
<br>
<h1>rem 也可作为固定长度单位设置宽高等</h1>
<div class="rem-box">
宽：14 * 10 = 140px<br>
高：14 * 10 = 140px
</div>
<br>
<h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
<div class="vhvw-box">
宽：屏幕宽度的50%<br>
高：屏幕高度的50%
</div>
</body>
</html>
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位的更多相关文章
-
CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
-
css之height: 100%的有效场景
在css的日常应用中,经常会遇到想要通过 height: 100%来达到使子盒子与父盒子高度一样的目的,但是偶尔明明设置了height: 100%,但是却没有达到想要的结果,这次我们就一起探索一下,什 ...
-
div+css中height:auto !important; height:663px; min-height:663px !important;区别
height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...
-
css中height, width默认值
转载自:https://www.cnblogs.com/heyode/p/5973960.html <body> <div class="wrap"> &l ...
-
CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨
先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先.IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也 ...
-
在 static table view 中增加date picker 并进行动态高度设定
http://blog.apoorvmote.com/how-to-pop-up-datepicker-inside-static-cells/
-
CSS中强大的EM
(转)作者:dearjohn ,发布于2012-7-31 http://www.uml.org.cn/html/201207311.asp 使用CSS也好久了,但一直都是在使用“px”来设置Web元素 ...
-
css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
-
CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
随机推荐
-
TypeError: datetime.datetime(2016, 9, 25, 21, 12, 19, 135649) is not JSON serializable解决办法
1.一个简单的方法来修补json模块,这样序列将支持日期时间. import json import datetime json.JSONEncoder.default = lambda self, ...
-
修改SQL SERVER表,并添加说明
alter table dbo.user_PersonManagement add F_FGBM nvarchar(500)GO EXEC sys.sp_addextendedproperty @na ...
-
node.js 基础学习笔记3 -express
1.工作原理 当通过app.js建立的服务器时,会看到一个简单的页面.返回页面时,浏览器会向服务器发送请求.app会解析请求的路径,调用相应的逻辑,调用对应的视图模板,传递对象数值,最终生成HTML页 ...
-
WampServer Version 2.5 bug修改
做PHP开发都需要安装PHP的运行环境,为了方便,网上可以下载到好多的集成环境,最近使用WampServer Version 2.5发现有一些bug,分享一下修改的方法.高手请路过. 1.echo d ...
-
windows组件
Wcript.shell是windows自带的组件 因为他过于强大 所以经常被黑客加以利用 他可以调用系统内核运行的dos基本命令 与此对应的还有三个危险组件 他们分别是 FSO shell.Appl ...
-
CKEditor配置及使用
注:使用CKEditor版本为js版本的CKEditor 4,所有配置均参考自CKEditor官方API:http://docs.ckeditor.com/,以及实践经验 一.快速使用 1.引入CKE ...
-
json jar包支持
json-lib工具包(json核心包)下载地址: http://sourceforge.net/projects/json-lib/files/json-lib/json-lib-2.4/ json ...
-
高并发的常见策略--大型web项目
一个运营的系统在正式上线后将会遇到各种层级的高并发请求,因此我们必须对此做出相应的策略和技术解决方案,首先我们需要认清系统的高并发由3个层面导致: 1. 传输层 大量用户对系统请求后,将会造成网络带宽 ...
-
《第一行代码》学习笔记20－广播接收器Broadcast_Receiver（3）
1.强制用户下线的逻辑并不是写在MainActivity里的,而是应该写在接收这条广播的广播接收器里面,这样强制下线的功能就不会 依附于任何的界面,不管是在程序的任何地方,只需要发出一条广播,就可以完 ...
-
.net中读取xml文件中节点的所有属性信息
功能描述: 将数据以xml的格式记录成配置文件,需要获取配置文件中的数据时,则获取对应的配置文件,读取配置文件里对应节点的所有属性. 逻辑实现: 1.将数据配置好在xml文件中. 2.获取xml文件中 ...