尺寸单位em,rem,vh,vw
这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位
1.em
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 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%大的情况
最后说一句,以上这些尺寸都是css3中的尺寸单位
低版本的ie就不支持了
没看懂的同学可以参考这里的一个demo
复制粘贴保存成index.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>
尺寸单位em,rem,vh,vw的更多相关文章
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- CSS3中的px,em,rem,vh,vw辨析
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...
- CSS3中的px,em,rem,vh,vw
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...
- 理解并使用CSS3中的单位rem vh vw vmin vmax
rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- 关于CSS中的字体尺寸设置 em rem
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- css长度单位学习(em,rem,px,vw,vh)
绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...
- 关于CSS单位:rem vh vw vmin vmax
rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body { font-size: ...
随机推荐
- javascript的一些札记
1. 原来放在不同js文件里面的$(document).ready(function(){})都会执行到. 2. $(window).scroll(function(){}) 窗口滚动事件. 3. ...
- action spring 注入错误,如果检查各项注入都没有错误时,考虑struts 是否配置了namespace(如果你有多个namespace="/")
[ERROR] 2015-01-04 09:42:35,180 (CommonsLogger.java:38) - Exception occurred during processing reque ...
- 2018.08.30 Tyvj1952 Easy(期望dp)
Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连 ...
- TopK排序
利用快速排序实现TopK排序 //返回支点的下标 int partition(int *arr, int low, int high) { //选取第一个元素为支点 int pivot = arr[l ...
- iso搭建本地源
1.挂载iso mount -o loop /root/test.iso /mnt/iso 2.新建repo [local] name=local baseurl=file:///mnt/iso/ e ...
- UVa 11134 Fabled Rooks (贪心+问题分解)
题意:在一个n*n的棋盘上放n个车,让它们不互相攻击,并且第i辆车在给定的小矩形内. 析:说实话,一看这个题真是没思路,后来看了分析,原来这个列和行是没有任何关系的,我们可以分开看, 把它变成两个一维 ...
- Redis配置总结
一:常用配置 1.bind,格式为bind 127.0.0.1:这个是很重要的配置,如果bind 127.0.0.1则外部网络是访问不了的(如果外部网络要访问还要开放端口) 2.port,格式为por ...
- (网络流)ACM Computer Factory --POJ --3436
链接: http://poj.org/problem?id=3436 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#probl ...
- (线段树)Balanced Lineup --POJ --3264
链接: 对于POJ老是爆,我也是醉了, 链接等等再发吧! http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82832#problem/G 只 ...
- C++中的结构体的认识
C++中的结构体的认识 1. typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程的一部分,但它并不实际分配内存空间. 实例像:typedef ...