本文同时发表在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. Less注释语法

    Less注释语法 适当的注释是保证代码可读性的必要手段,Less支持两种类型的注释:多行注释和单行注释. 1)形如 /* */ 的多行注释.如: /* Hello, I'm a CSS-style c ...

  2. 迷宫问题-POJ 3984

    迷宫问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24348   Accepted: 14206 Descriptio ...

  3. 《Linux命令行与shell脚本编程大全》第十七章 创建函数

    可以将shell脚本代码放进函数中封装起来,这样就能在脚本中的任何地方多次使用它了. 17.1 基本的脚本函数 函数:是一个脚本代码块,可以为其命名并在代码中任何位置重用. 17.1.1 创建函数 有 ...

  4. [LeetCode] N皇后问题

    LeetCode上面关于N皇后有两道题目:51 N-Queens:https://leetcode.com/problems/n-queens/description/ 52 N-Queens II: ...

  5. Self Hosting WebServer 的几种方式

    写在前面: IIS是Windows平台非常关键的组件,它是微软自带的Web服务器,可以很方便的帮助我们运行起一个网站,WebApi等服务,提供给外部来访问.即使它被很多java或者ruby的同学各种鄙 ...

  6. 高可用的Spring FTP上传下载工具类（已解决上传过程常见问题）

    前言 最近在项目中需要和ftp服务器进行交互,在网上找了一下关于ftp上传下载的工具类,大致有两种. 第一种是单例模式的类. 第二种是另外定义一个Service,直接通过Service来实现ftp的上 ...

  7. ML笔记：Where does the error come from?

    error来自哪? 来自于偏差Bias和方差Variance. 就如打靶时瞄准一个点f平均,打出的点f星分布在该点周围. 该点与实际靶心f帽的距离就是偏差Bias, 打出的点与该点的分布距离就是方差V ...

  8. Python将纳入高考？

    最近,"Python将纳入高考"的消息,狠狠地刷了朋友圈. 尽管这则消息目前还未得到官方的确认,但人们对于Python的火热关注度,还是引来众程序员热议. 虽然小编资历尚浅,但还是 ...

  9. 关于PHP 采集类

    伟大的筒子们,我们需要经常采集. 不知道大家每次采集的时候会不会烦躁,不用八爪鱼,不用PYTHON 是不是感到手无力,看到正则匹配每次匹配不对,一换采集内容就是头疼,重新拼写正则? 不要说是高手 ,就 ...

  10. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...