详解用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 学生成 ...
随机推荐
- 使用line-height来垂直居中在安卓设备并不居中，利用ji调整
先判断智能机浏览器的版本信息:方法有两种,但是第一种兼容性更好,但是使用了device插件 第一种: if (device.android()){ } 第二种: var ua = navigator. ...
- 房上的猫：HTML5基础
一.W3C标准 1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)和行为(Behavior) 2)不很严谨的 ...
- thinkinginjava学习笔记02_对象
对象 1. 对象通过一个引用来操作,但是java中的对象是按值传递的,基本上可以在操作中认为对象本身,在内部结构中仍然要记得是对象实体的引用:如:String s = "abcd" ...
- 转：JAVA常见错误处理方法 和 JVM内存结构
OutOfMemoryError在开发过程中是司空见惯的,遇到这个错误,新手程序员都知道从两个方面入手来解决:一是排查程序是否有BUG导致内存泄漏:二是调整JVM启动参数增大内存.OutOfMemor ...
- JAVA类的创建： 创建JAVA的类 ，JAVA的字段，JAVA类的方法
1. 创建Java的类 如果说Java的一切都是对象,那么类型就是决定了某一类对象的外观与行为.可是类型的关键字不是type,而是class,创建一个新的类型要用下面的代码: 1 2 3 class ...
- Linux(Cent OS7.2)下启动停止memcached方法及ps命令使用讲解
Linux下,以Cent OS7.2为例,安装memcached后的启动方法很简单,这里我们使用yum源安装. 首先查找yum源版本库的memchaced安装包, yum list | grep me ...
- VBox 一款基于vue开发的音乐盒 序章
己基于vue写了一个 Mplayer, github地址:https://github.com/xiangwenhu/MPlaer, 演示地址:http://babydairy2017.cloudap ...
- jQuery Mobile Slider 禁用点击事件
阿子原创,转载请注明出处. 在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作.为此需要禁用Slider的点击事件. 官方A ...
- newlisp
Windows で使う場合 Windoows用のインストーラからインストールすると.newLISP のIDE用のアイコンが出来るのでそこから使ってもいいし.コマンドプロンプトで newlisp と入力 ...
- sqlite ef6 踩坑
调试的时候配置写如下,这样写是没有问题的但是在实际环境中有问题,因为EF路径找不到.会提示错误:The underlying provider failed on open <connectio ...