css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
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”之行. ...
随机推荐
- 6.6 Pandora 实操 - API/SDK
创建实时仓库 连接日志仓库 点击到工作流查看 通过 Java sdk 打数据 通过 java sdk 对应字段打数据,先打到实时仓库(消息队列),对应再会打到日志仓库(做存储). 代码见 Sequen ...
- hdfs directory item limit - (dfs.namenode.fs-limits.max-directory-items)
// :: WARN scheduler.TaskSetManager: Lost task , emr-worker-.cluster-, executor ): org.apache.hadoop ...
- 前台js根据当前时间生成订单号
*********前台显示框**************** <input type="text" id="WIDout_trade_no" name=& ...
- C# 换行
要让一个Windows Form的TextBox显示多行文本就得把它的Multiline属性设置为true. 要让TextBox里面的文本换行大家往往会想到直接在要换行的地方加个转义的换行符&quo ...
- bootstrap网格设置等高度
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 遍历二叉树 traversing binary tree 线索二叉树 threaded binary tree 线索链表 线索化
遍历二叉树 traversing binary tree 线索二叉树 threaded binary tree 线索链表 线索化 1. 二叉树3个基本单元组成:根节点.左子树.右子树 以L.D.R ...
- 前端开发-日常开发沉淀之git提交文件忽略
.gitignore文件里添加需忽略的文件,或需要提交的文件 # Created by .ignore support plugin (hsz.mobi) ### VisualStudioCode t ...
- VUE-011-通过 v-if 和 v-for 实现特定值的列表循环匹配，并显示满足匹配条件的值
前端页面开发过程中,经常遇到服务端返回的数据中,存在一些需要转义的表单项.比如,员工信息中的学历,假设研究生学历的代码是101(或10001),则数据库中对应字段存放的是 101(或10001),而非 ...
- pc端 页面 显示在手机 一行控制适配问题
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
- FEX(Fabric Extender）
一.FEX Cisco Nexus 2000 FEX作为N5K.N6K.N7K.FI的一个远程线卡,单独的2K是没有网管功能的,必须配合父系交换机使用. 主要解决TOR和EOR的问题,TOR,接线简单 ...