rem(root em)

如果你给body设置了font-size字体大小，那么body的任何子元素的1em就是等于body设置的font-size

demo：
body {  font-size:
14px; }

div {  font-size: 1.2rem; // calculated at 14px * 1.2, or 16.8px}

em: 从它上一级父元素继承了字体大小，并且逐渐得增加。

Demo：

Html:

<body>

<div class=”div1”>

<div
class=”div2”>

<div
class=”div3”>

</div>

</div>

</div>

</body>

body{ font-size：14px; }

div1{font-size:1.2em};//1.2*14PX

div2{font-size:1.2em}//1.2*1.2*14px

div3{font-size:1.2em}//1.2*1.2*1.2*14px

vh and vw 这两个字体单位可叼了

响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。

Demo: 只用一行CSS代码就实现同屏幕等高,等宽的框
.slide {

height: 100vh;

width:100wh;

}

vmin and vmax : vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值

浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。

如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px

关于CSS单位:rem vh vw vmin vmax的更多相关文章

  1. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  2. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  3. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

  4. rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...

  5. 移动端css单位之 “vh” & “vw”

    一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度, ...

  6. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  7. CSS3中的px,em,rem,vh,vw辨析

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...

  8. CSS3中的px,em,rem,vh,vw

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...

  9. CSS中的 vh/vw

    vh 相对于当前窗口的大小,我用electron-vue来开发一个桌面应该,就用到这个,很方便,百分比需要外面有一个固定的高度,依赖父元素

随机推荐

  1. HTTP下载图片

    网上有专门写的http下载的C++代码,但是我发现windows自带的http下载,一行代码就搞定,非常简单,目前为止使用正常. 首先包含头文件和lib文件 #include <urlmon.h ...

  2. php上传多文件max_file_uploads限制问题

    在PHP程序中,常常会遇到这种问题,上传附件时明明成功上传了很多附件,如图片等,但实际上只存在20个附件,或者直接报错无法上传. 在DEDECMS5.7编辑图集的时候,发现只要超过20张图片保存就会出 ...

  3. Ubuntu相关命令

    此贴包含自己搭建网站以及自学Ubuntu遇到的相关命令,方便以后查看,故相关帖子整理记录在此! 用户切换 当前用户切换到root用户,只需要执行sudo su即可. root用户切回user用户,只需 ...

  4. Python 序列化pickle/cPickle模块整理

    Python序列化的概念很简单.内存里面有一个数据结构,你希望将它保存下来,重用,或者发送给其他人.你会怎么做?这取决于你想要怎么保存,怎么重用,发送给谁.很多游戏允许你在退出的时候保存进度,然后你再 ...

  5. 浅谈HTML中的块级元素和内联元素

    一.基本概念 1.块级元素(block element):一般都从新行开始占据一定的矩形空间,可以设置其宽.高属性来改变矩形的大小.一般情况下块级元素可以包含内联元素和其它块级元素,但也有特殊如for ...

  6. 初次使用Bootstrap

    一.概述也好,过程也好,反正就是这样 知道这个还是从群里听到的,一个人的视野是有限,必须借助他人来扩展.好奇使我去搜索了解了一下.原来是一个网页前端框架,可以适合不同大小屏幕,自动适应正常显示.这就是 ...

  7. socket的几个配置函数

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  8. SpringXML方式配置bean的生存范围Scope

    在一个bean的配置里面可以指定一个属性Scope,也就是bean的范围,bean的生命周期. Scope可取的值5种:singleton(默认).prototype.request.session. ...

  9. SSH服务：packet_write_wait: Connection to 67.218.143.160 port 22: Broken pipe错误处理

    1.在~/.ssh/config配置文件中添加 IPQoS lowdelay throughput 2.在/etc/ssh/ssh_config配置文件中添加 IPQoS lowdelay throu ...

  10. New Concept English three（10）

    The great ship, Titanic, sailed for New York from Southampton on April 10th, 1912. She was carrying ...