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”之行. ...
随机推荐
- Angularjs判断页面是否已经渲染结束(动态给标签长度)
相信大家都会碰到这样的问题.页面循环li.但是因为个数不知道.没有办法给li设置固定宽度.那么这时就需要动态计算数据长度并动态改变li的宽度 <!--周边信息--> <div cla ...
- Java虚拟机----垃圾回收与内存分配
一.垃圾回收的对象: 在Java的运行时数据区中,程序计数器和虚拟机栈.本地方法栈是随着线程的生灭而生灭,栈当中栈帧的大小在编译的时候已知,在方法结束之后栈帧出栈,这部分的垃圾回收是明确的,因此需要讨 ...
- Spark性能优化
1.Spark优化 1) 使用foreachPartitions替代foreach. 原理类似于“使用mapPartitions替代map”,也是一次函数调用处理一个partition的所有数据,而不 ...
- php基础--来自网页转载
注意:1.网页文件放在wamp中的www文件下:2.www文件下不能出现中文:网页浏览的方法:1.没有建立站点:localhost/文件所在位置2.建立站点:(1)站点-新建站点-打开对话框 (2)修 ...
- PHP算法学习(8) 环形链表 解决约瑟夫问题
2019年2月25日17:29:17 Josephus有过的故事:39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓.于是决定了自杀方式,41个人排成一个圆圈 ...
- css学习_css3伸缩布局 flex布局
1.flex布局 案例一: 案例二: 保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例 -----用fle ...
- Netty入门(一):零基础“HelloWorld”详细图文步骤
因为接下来的项目要用到netty,所以就了解一下这个程序,奈何网上的教程都是稍微有点基础的,所以,就写一篇对于netty零基础的,顺便也记录一下. 先扔几个参考学习的网页: netty 官方API: ...
- Oracle 基础概念
数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等) --查询当前数据库名:select name from v$database; 数据库实例是一组Oracle后台进程/线程以及 ...
- 一个人工智能教程,教案接地气、限制级。 http://www.captainbed.net
一个人工智能教程,教案接地气.限制级. http://www.captainbed.net https://open.weibo.com/
- 使用openSSL开源工具进行SSL/TLS 安全测试
本文介绍了使用半自动化工具执行SSL&TLS安全性评估的过程,以及如何使用手动及工具的测试方法验证并发现问题.目的是优化TLS和SSL安全测试流程,帮助信息安全顾问在渗透测试时在TLS / S ...