本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41

为什么要有em

为了弹性布局。更准确的说是界面元素根据浏览器字体大小而进行整体缩放。

用户可以根据他们的需要而调整浏览器字体大小，例如有的人视力不好，可能需要改变浏览器的默认字体大小。

这时，我们希望页面元素的宽度、外边距、内边距等尺寸元素也会根据字体大小而进行成比例的缩放，这时我们需要使用em单位而不是px单位，因为px单位是固定的，一旦赋值元素的尺寸就不会变化。

em和px的转换

em单位是相对于_使用em单位的元素_的字体大小。即1em总是等于当前使用em元素的字体大小。

如果当前使用em的元素没有设置字体大小，例如:

<body>

    <div id="father">

    ......

    </div>

</body>


body{

    font-size:20px;

}

#father{

    width:20em;

    border:1px solid red;

}

根据1em总是等于当前使用em元素的字体大小，当前元素的字体大小是从body继承来的20px，所以1em=20px。继而算出width等于20*20=400px。

但是如果当前使用em的元素设置了字体大小，还是上面的例子，只不过加了font-size的设置：

body{

    font-size:20px;

}

#father{

        font-size:2em;

    width:20em;

    border:1px solid red;

}

当前元素的font-size等于2em，在这种情况下，元素本身的font-size=父元素的font-size乘以em值，

即20*2=40px。

再根据1em总是等于当前使用em元素的字体大小，当前元素的字体大小是40px，所以1em=40px。继而算出width等于20*40=800px。

总之：先找到计算出当前元素的font-size值。如果当前元素的font-size也使用了em单位，那么当前元素的font-size=父元素的font-size*font-size的em值。

em的应用场景

em可以设置在margin、padding、width、height等值上。

我们查看本页面的css源码，搜索em：

rem单位

也是一种字体单位，类似于em，但是rem转化为像素的大小取决于页根元素的字体大小，即 html 元素的字体大小。

为什么使用rem单位

使用em时，我们需要知道使用em元素的字体大小。如果本身没有设置，我们需要依据继承性寻找父元素的字体大小甚至是爷爷级元素的字体大小，很繁琐。但是rem单位只需知道html元素的字体大小即可，html元素的字体大小相当于唯一的标杆。

rem和px的转换

根元素字体大小乘以你 rem 值就是px值。

<body>

    <div id="father">

    ......

    </div>

</body>


html{

    font-size:20px;

}

#father{

    font-size:1.5rem;

        width:20em;

    border:1px solid red;

}

此时#father元素的font-size为20_1.5=30px。width为20_20=400px。

一定是依据html的字体大小，不是body的字体大小。

试验此代码时还发现谷歌浏览器的最小字体是12px，即使字体设置为10px也会被强制设置成12px。o(╯□╰)o

css 其他字体单位

  • vh和vw

    vw = view width

    vh = view height

    vh等于viewport高度的1/100。例如，如果浏览器的高是900px,1vh求得的值为9px。

    vw同理。

注意这里的viewport指的是浏览器内部的可视区域大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

如果想做一个占满高度的区域：

.slide {

    height: 100vh;

}
  • vmin 和 vmax

    vmin和vmax与宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

所以你什么时候可能用到这些值？

设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。例如，一个正方形的元素总是至少接触屏幕的两条边可能是这样定义的：

.box {

    height: 100vmin;

    width: 100vmin;

}

如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax。

.box {

    height: 100vmax;

    width: 100vmax;

}

  • ex 和 ch

    ex 和 ch 单位基于字体的度量单位，依赖于设定的字体。

    ch：给定字体的数字“0”的宽度

    ex：当前字体的x-height或者一个em的一半。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。不同字体ex的值可能不同，因为不同字体中x的高度可能不同。但是许多用户代理的做法是：取em的值，再取其一半用作ex的值，因为大多数字体都没有内置ex的高度值，而且计算这个值相当的困难。由于大多数字体的小写字母都是相应大写字母高度的一半，所以可以方便的假设上述情况。

兼容性：http://caniuse.com/ 搜索上面的单位即可。

参考资料：http://www.w3cplus.com/css/px-to-em

http://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

http://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html

http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

css em单位的更多相关文章

  1. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  2. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  3. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  4. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  5. 比较css中单位px，em和rem的区别

    国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...

  6. 如何更愉快地使用em —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  7. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  8. css em

    em与px换算 任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合: 1em=16px.那么,12px=0.75em,10px=0.625em.为了简化font-size的换算, ...

  9. 推荐font-size的单位 % em单位

    在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看 ...

随机推荐

  1. 实战Excel Add-in的三种玩法

    作者:陈希章 发表于 2017年11月26日 前言 这个系列文章应该有一阵子没有更新了,原因是一如既往的多,但是根本所在是我对于某些章节其实还没有完全想好怎么写,尤其是对于Office Add-in这 ...

  2. Python学习笔记整理总结【Memcache & Redis】

    一.Memcached1.简介Memcached 是一个高性能的分布式内存对象缓存系统,一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展性.用来存储 ...

  3. 关于SpringBoot bean无法注入的问题（与文件包位置有关）改变自动扫描的包

    原因:同事在写demo时出现bean加了@component后却无法被spring扫描到(在编译的时候IDEA就提示拿不到对应的bean)的问题. 后来经过研究是跟文件包的位置有关的. springb ...

  4. C#Dictionary键值对取值用法

    必须包含名空间System.Collection.Generic     Dictionary里面的每一个元素都是一个键值对(由二个元素组成:键和值)     键必须是唯一的,而值不需要唯一的     ...

  5. SQL Count（*）函数，GROUP_By,Having的联合使用

    COUNT(*)  函数返回在给定的选择中被选的行数. 语法:SELECT  COUNT(*) FROM  table 使用:现在有一个表,名叫app_category,从Navicat中可以看到表中 ...

  6. C# 使用Task实现任务超时，多任务一起执行

    简介:充分使用Task的异步功能代码实现:1.实现了任务超时 退出任务 2.多个任务一起执行 /// <summary>        ///做事 需要 ms秒 才能完成        / ...

  7. zzuli 1815: easy problem 打表

    1815: easy problem Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 243  Solved: 108 SubmitStatusWeb ...

  8. 真正的精通Java是种什么样的境界？

    会在不适合使用java的地方不用java! 作为一名软件开发者,要追求的,应该是不断地提升自己分析问题把握事物关键点,实事求是地给出切实可行且能"一剑封喉"的优雅解决方案的能力,再 ...

  9. 初学sheel脚本练习过程

    以下是初学sheel脚本练习过程,涉及到内容的输出.基本的计算.条件判断(if.case).循环控制.数组的定义和使用.函数定义和使用 sheel脚本内容: #! /bin/bashecho &quo ...

  10. 深入理解Java内存模型——volatile

    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会非常特别. 理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁 ...