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. JS返回一个数据的千分位格式

    /** * 价钱转换-从右往左每3位数字加一个逗号 * @param price 需要转换的价格 */ formatPrice(price){ var newPrice = price.split(' ...

  2. 在写一个iOS应用之前必须做的7件事(附相关资源)

    本文由CocoaChina--不再犹豫(tao200610704@126.com)翻译 作者:@NIkant Vohra 原文:7 Things you must absolutely do befo ...

  3. 暗网 tor溯源困难根因——用户的请求会在分布全球的主机随机跳转三次，最终才到达服务器，这就造成了溯源的极其困难

    Tor(The Onion Router)可以说是目前最为流行的网络匿名访问技术,用户的请求会在分布全球的主机随机跳转三次,最终才到达服务器,这就造成了溯源的极其困难,从而使得所有的访问者完全没有身份 ...

  4. java中容器的学习与理解

    以前一直对于java中容器的概念不理解,虽然学习过,但始终没有认真理解过,这几天老师提出了这样一个问题,你怎么理解java中的容器.瞬间就蒙了.于是各种搜资料学习了一下,下面是我学习后整理出来的的一些 ...

  5. Algorithm2: 重复查过半数的元素

    数组中,有一个元素的值在数组中重复的个数是超过一半,获得元素超过一半的元素值 int MoreThanHalfNumber(int * arr, int n){                  in ...

  6. Prism 4 文档 ---第5章 实现MVVM模式

        MVVM模式有助于清楚的区分应用程序界面的业务层和展现层.保持一个清晰的应用程序逻辑和UI分离有助于处理开发和设计过程中大量的问题,同时,使得应用程序的测试,维护,和扩展更加容易.MVVM也可 ...

  7. HDU 4549 M斐波那契数列（矩阵快速幂+费马小定理）

    M斐波那契数列 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submi ...

  8. 集成xadmin源码到项目的正式姿势

    xadmin是强大的,但是为了更好的后期定制开发,可能会修改到xadmin的源码. 因此还是推荐将xadmin源码集成到自己的项目中. 1.pip install xadmin 安装xadmin的模块 ...

  9. codis3.2安装配置中的一些问题

    1.参考文档与参考资料问题 安装codis集群之前,我先在网上找资料,然后又到github的项目官方地址找,不得不说,相关的资料不好找,而且找到之后有些东西说的也不是很清楚.由于codis版本迭代的问 ...

  10. Alt+Shift+R组合键，用来在一个java文件中批量的重命名变量。

    myeclipse和eclipse集成编译软件,都提供了一个快捷键用来批量重命名变量:Alt+Shift+R组合键,用来在一个java文件中批量的重命名变量.扩展知识:如果想要重命名文件名,又不想手动 ...