详解用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 学生成 ...
随机推荐
- 了解数组中的队列方法,DOM中节点的一些操作
队列的概念 栈是一种后进先出的结构,而队列是一种先进先出的结构.如银行排队,排在前面的人先办业务然后离开,后来的人站在最后.可以用队列的push()方法插入元素到队列的末尾,可以用shift()方法删 ...
- Git Pro读书笔记
本文为Git Pro读书笔记,所有内容均来自Git Pro 1 Git基础 1.1 记录每次更新到仓库 在Git里,文件有4种状态,modified, staged, commited, 还有一种状态 ...
- Redis在APP中的应用
前言 redis 是内存型数据库,读取data速度远快于mysql和sqlserver,如果将APP中列表信息或者一些常被访问的信息转存至内存上,然后APP通过redis读取内存上的数据,那么APP的 ...
- 解决反序列化(Deserialize)无法找到程序集的错误
http://blog.csdn.net/w_s_q/article/details/5677536 在使用.NET序列化对象时,会将程序集信息也包含进去.如果将序列化之后的字节数组通过网络(或其他传 ...
- pyspark进行词频统计并返回topN
Part I:词频统计并返回topN 统计的文本数据: what do you do how do you do how do you do how are you from operator imp ...
- ERP中自定义报表制作流程
查询制作流程 新增单表查询--查询语句设置--表格设置(列信息)--参数设置--关联设置--着色设置 报表设计需求(以差旅报销单为例) 1.制作按部门统计每个月的 报销金额并且可以关联到明细进行比对 ...
- 微信小程序 - 上拉加载
demo.wxml 文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...
- python检测404页面
某些网站为了实现友好的用户交互,提供了一种自定义的错误页面,而不是显示一个大大的404 ,比如CSDN上的404提示页面如下: 这样虽然提高了用户体验,但是在编写对应POC进行检测的时候如果只根据返回 ...
- 数据结构-栈(应用篇)之快速排序法-C和C++的实现
一.原理解析 快速排序法: 基本思路是,从第一个元素开始,把所有比它大的元素放在它后面,把所有比它小的元素放前面.然后划分它前面和后面的所有元素,分别再做快速排序,直到无法再划分为止. 在以下程序案例 ...
- IdentityServer(15)- 第三方快速入门和示例
这些示例不由IdentityServer团队维护. IdentityServer团队提供链接到了社区示例,但不能对示例做任何保证. 如有问题,请直接与作者联系. 各种ASP.NET Core安全示例 ...