详解用em替换px
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的更多相关文章
- 详解使用EM算法的半监督学习方法应用于朴素贝叶斯文本分类
1.前言 对大量需要分类的文本数据进行标记是一项繁琐.耗时的任务,而真实世界中,如互联网上存在大量的未标注的数据,获取这些是容易和廉价的.在下面的内容中,我们介绍使用半监督学习和EM算法,充分结合大量 ...
- 定时调度篇之Quartz.Net详解（被替换）
一. 背景 我们在日常开发中,可能你会遇到这样的需求:"每个月的3号给用户发信息,提醒用户XXX "."每天的0点需要统计前一天的考勤记录"."每个月 ...
- 2. EM算法-原理详解
1. EM算法-数学基础 2. EM算法-原理详解 3. EM算法-高斯混合模型GMM 4. EM算法-高斯混合模型GMM详细代码实现 5. EM算法-高斯混合模型GMM+Lasso 1. 前言 概率 ...
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...
- px em rem的详解与区别
在前端项目开发中,px,em,以及rem都是页面布局常用的单位,虽然它们是长度单位,但是所含的意义不一样.通过复习和查阅,总结了以下知识. px像素(Pixel) 定义:相对长度单位.像素px是相对于 ...
- linux shell 字符串操作（长度，查找，替换）详解
linux shell 字符串操作(长度,查找,替换)详解 在做shell批处理程序时候,经常会涉及到字符串相关操作.有很多命令语句,如:awk,sed都可以做字符串各种操作. 其实shell内置一系 ...
- EM算法详解
EM算法详解 1 极大似然估计 假设有如图1的X所示的抽取的n个学生某门课程的成绩,又知学生的成绩符合高斯分布f(x|μ,σ2),求学生的成绩最符合哪种高斯分布,即μ和σ2最优值是什么? 图1 学生成 ...
随机推荐
- 非常详细的 Docker 学习笔记-转载
文章链接 一.Docker 简介 Docker 两个主要部件: Docker: 开源的容器虚拟化平台 Docker Hub: 用于分享.管理 Docker 容器的 Docker SaaS 平台 -- ...
- chattr 命令详解
chattr 作用: 改变文件属性,这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有一下8种模式 模式: a: 让文件或目录仅供附加用途 b: 不更新文件或目录的最后存取时间 ...
- UNIX域协议（无名套接字）
关于什么是UNIX域套接字可以参考:http://www.cnblogs.com/xcywt/p/8185597.html这里主要介绍非命名的UNIX域套接字的用法.1.socketpair函数先看m ...
- SQL重复记录查询的几种方法
http://www.jb51.net/article/34820.htm \ 1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 复制代码 代码如下: select * f ...
- Odwiedziny[POI 2015]
题目描述 给定一棵n个点的树,树上每条边的长度都为1,第i个点的权值为a[i]. Byteasar想要走遍这整棵树,他会按照某个1到n的全排列b走n-1次,第i次他会从b[i]点走到b[i+1]点,并 ...
- Life In Changsha College- 第二次冲刺
第二次冲刺任务 设计留言板功能. 用户故事 用户打开"生活在长大"的界面 程序首页展示校园服务,论坛等相关信息 用户选择留言板 程序界面跳转 用户查看留言,并可以输入留言内容 提交 ...
- SQLServer 查看SQL语句的执行时间
在MSSQL Server中通过查看SQL语句执行所用的时间,来衡量SQL语句的性能. 通过设置STATISTICS我们可以查看执行SQL时的系统情况.选项有PROFILE,IO ,TIME.介绍如下 ...
- 转：java.lang.OutOfMemoryError: Java heap space错误及处理办法(收集整理、转)
以下是从网上找到的关于堆空间溢出的错误解决办法: Java.lang.OutOfMemoryError: Java heap space =============================== ...
- 为什么树莓派不会受到 Spectre 和 Meltdown 攻击
最近爆出来的 Intel CPU 的底层漏洞可谓是影响巨大,过去20年的电脑都可能会受影响.前几天 Raspberry Pi 的官方 Twitter(@Raspberry_Pi) 转推了这篇文章,通过 ...
- Android异常分析(转)
关于异常 异常? 异常就是一种程序中没有预料到的问题,既然是没有预料到的,就可能不在原有逻辑处理范围内,脱离了代码控制,软件可能会出现各种奇怪的现象.比如:android系统常见异常现象有应用无响应. ...