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. 设置了width和height的a元素在IE11与IE11以下浏览器中的不同渲染方式

    #welcomeMiddleBtn { display: block; width: 73px; height: 120px; margin: 0px auto; } <a id="w ...

  2. Ubuntu相关命令

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

  3. Linux下安装Nginx教程

    什么是Nginx? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,在高连接并发的情况下N ...

  4. 005PHP基础知识——数据类型（二）

    <?php /** * 布尔型判断一种状态是否成立. * 布尔型 TRUE FALSE * 为布尔假型的类型: * 1. FALSE * 2. 0 * 3. 0.0 * 4. 空字符串为假 * ...

  5. webapi在IIS发布后报Http 403.14 error

    服务器是Windows Server 2008 R2 Enterprise IIS6.1     解决方法,修改web.config文件   1.在<system.webServer>配置 ...

  6. 【51nod-1042】数字0-9的数量

    给出一段区间a-b,统计这个区间内0-9出现的次数.   比如 10-19,1出现11次(10,11,12,13,14,15,16,17,18,19,其中11包括2个1),其余数字各出现1次. Inp ...

  7. CF Round #456 (Div. 2)

    这时我第一次打CF 然后一看t1 哇好水 然后秒A了 看B 哇好像也很水 然后A了 看了C 不会... 然后去看D 似乎概率 然后推了一下,退出来了 然后看E 不会... 接着问了半个小时怎么hack ...

  8. 配置wampserver 虚拟主机

    1.修改http.conf 找到,#Include conf/extra/httpd-vhosts.conf,修改为(有的版本服务器,默认是开启的): 2.配置httpd-vhosts.conf文件, ...

  9. pkcs#5和pkcs#7填充的区别

    最近做到了关于加密和解密的部分. 使用算法AES的时候,涉及到数据填充的部分,数据的填充有很多种方案,用的比较多的有pkcs#5,pkcs#7, 下面的都是从网上转来的.结论就是在AES 的使用中,p ...

  10. Postfix邮件黑名单和白名单

    本文主要介绍如何用Postfix添加域名黑名单和白名单,用以处理垃圾邮件. 1.修改postfix主配置文件,增加限制语句 vim /etc/postfix/main.cf # 文末添加一行,限制往本 ...