em 的实际大小是相对于其上下文的字体大小而言的。如果我们给<body>标签设置文字大小为 100%，给其他文字都使用相对单位 em，那这些文字都会受body 上的初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改 body 的文字大小，其他所有文字也会相应变大。

　　在这里，我们可以使用这个公式，来将文字的像素单位转换为相对单位。

　　“目标元素的尺寸÷上下文元素的尺寸=百分比尺寸”

　　值得注意的是，现代浏览器的默认文字大小都是 16 像素（显式声明的除外）。因此一开始给 body 标签应用下列任何一条规则所产生的效果都一样：　　

　　　　　　　　 font-size: 100%;

　　　　　　　　font-size: 16px;
　　　　　　　　font-size: 1em;

　　下面就以一段代码为例：　

　　#logo {

　　　　font-size: 48px;
　　}

　　因为 48 ÷ 16 = 3，所以我们将样式修改如下：　　

　　#logo {
　　　　font-size: 3em; /* 48 ÷ 16 = 3*/
　　}

　　如果发现哪出了毛病，那应该是目标元素的上下文发生了变化。以页面中的标签为例：
　　　　<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
　　修改后的相对单位样式如下：
　　#content h1 {
　　　　font-size: 4.3125em; /* 69 ÷ 16 */

　　}

　　#content h1 span {
　　　　line-height: 1.052631579em; /* 40 ÷ 38 */
　　　　font-size: .550724638em; /* 38 ÷ 69 */
　　}
　　可以看到<span>元素的文字大小（38 像素）是相对于其父元素的文字大小（69 像素）而言的。而它的行高（40 像素）则是相对于其本身的文字大小（38 像素）而言。

　　ps：如果发现哪出了毛病，那应该是目标元素的上下文发生了变化。

详解用em替换px的更多相关文章

  1. 详解使用EM算法的半监督学习方法应用于朴素贝叶斯文本分类

    1.前言 对大量需要分类的文本数据进行标记是一项繁琐.耗时的任务,而真实世界中,如互联网上存在大量的未标注的数据,获取这些是容易和廉价的.在下面的内容中,我们介绍使用半监督学习和EM算法,充分结合大量 ...

  2. 定时调度篇之Quartz.Net详解（被替换）

    一. 背景 我们在日常开发中,可能你会遇到这样的需求:"每个月的3号给用户发信息,提醒用户XXX "."每天的0点需要统计前一天的考勤记录"."每个月 ...

  3. 2. EM算法-原理详解

    1. EM算法-数学基础 2. EM算法-原理详解 3. EM算法-高斯混合模型GMM 4. EM算法-高斯混合模型GMM详细代码实现 5. EM算法-高斯混合模型GMM+Lasso 1. 前言 概率 ...

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

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

  5. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  6. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

  7. px em rem的详解与区别

    在前端项目开发中,px,em,以及rem都是页面布局常用的单位,虽然它们是长度单位,但是所含的意义不一样.通过复习和查阅,总结了以下知识. px像素(Pixel) 定义:相对长度单位.像素px是相对于 ...

  8. linux shell 字符串操作（长度，查找，替换）详解

    linux shell 字符串操作(长度,查找,替换)详解 在做shell批处理程序时候,经常会涉及到字符串相关操作.有很多命令语句,如:awk,sed都可以做字符串各种操作. 其实shell内置一系 ...

  9. EM算法详解

    EM算法详解 1 极大似然估计 假设有如图1的X所示的抽取的n个学生某门课程的成绩,又知学生的成绩符合高斯分布f(x|μ,σ2),求学生的成绩最符合哪种高斯分布,即μ和σ2最优值是什么? 图1 学生成 ...

随机推荐

  1. SharedPreferences 存List集合，模拟数据库，随时存取

    PS:SharedPreferences只要稍微学过一点就会用,他本身通过创建一个Editor对象,来存储提交,而editor可以存的格式为 他里面可以存一个Set<String> Set ...

  2. PHP-CGI进程占用过多CPU

    一般情况下,PHP-CGI只在用户访问的时候会占用CPU资源,但是最近有同事反映,服务器上的的PHP-CGI进程占用了非常多的CPU,但是访问流量却非常少.这显然是一个不正常的现象,说有些地方存在故障 ...

  3. [编织消息框架][网络IO模型]NIO(select and poll)

    上面测试论证系统内核在read data时会阻塞,如果我们在把第一个阶段解决掉那么性能就会提高 NIO 编程 JDK 1.4中的java.nio.*包中引入新的Java I/O库,其目的是提高速度.实 ...

  4. Webpack 2 视频教程 010 - 配置 ESLint 实现代码规范自动测试 (下)

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  5. 字符串匹配KMP算法的C语言实现

    字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串"ABCDABD" ...

  6. asp.net mvc ajax提交模型到控制器

    http://blog.csdn.net/loongsking/article/details/53224473 function btn_submit() {        var data = n ...

  7. VS2017 调试不能命中断点问题

    去掉勾

  8. Python学习_01_对象

    之前关于python的知识比较零散,这一个系列的随笔将python重新学习整理一遍.学习书籍<Python核心编程>第二版. Python对象基础 python并不是一个单纯面向对象的语言 ...

  9. vue2 递归组件--树形

    递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子//思想:当v-if='f ...

  10. Windows下搭建Redis服务器

    Redis服务器是当下比较流行的缓存服务器,Redis通常被人拿来和Memcached进行对比.在我看来,应当是各具优势吧,虽然应用场景基本类似,但总会根据项目的不同来进行不通的选用. 我们今天主要讲 ...