px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:
1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明
Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,
也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问
题
Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有
其他的解释。
px 和 em的更多相关文章
-
rem、px、em之间的区别以及网页响应式设计写法
个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...
-
关于px、em和rem的学习笔记!
刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...
-
彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
-
(转)px、em、rem的区别和使用
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...
-
深度讲解VIEWPORT和PX是什么?移动端单位px,em,rem
刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不 ...
-
css中font-size的单位总结:px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指 ...
-
CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
-
px和em和rem的区别
一.px特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96 ...
-
css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...
-
必备:常用px,pt,em换算表(转)
常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...
随机推荐
-
MySQL数据库学习笔记(五)----MySQL字符串函数、日期时间函数
一.常见字符串函数: 1.CHAR_LENGTH 获取长度(字符为单位) 2.FORMAT 格式化 3.INSERT 替换的方式插入 4.INSTR 获取位置 5.LEFT/RIGHT 取左 ...
-
Tram---poj1847(简单最短路)
题目链接:http://poj.org/problem?id=1847 题意:给了N个交叉口,每个交叉口有自己能转到的交叉口. 注意这里:First number in the i-th line, ...
-
iOS开发 tabBarController选中状态
self.tabBarController.selectedIndex = 0; // 默认是0:
-
利用phpmyadmin设置mysql主从同步(或者备份)
一.实现同步的原理: 在主数据库与 从数据库 之间的实现整个复制过程主要由三个线程来完成,其中两个线程(Sql线程和IO线程)在 从数据库 端,另外一个线程(IO线程)在 主数据库 端. 注意: 1. ...
-
0901~0907面试总结(腾讯CDC、金蝶)
纯脑记,但应该不会差太多 20150901腾讯CDC面试(初级外包岗) 0826的上午先用QQ进行了初步沟通,要求做一个不考虑AI的井字棋游戏,0830上午E-mail上交了做好的DEMO,然后等了几 ...
-
bzoj:1187: [HNOI2007]神奇游乐园
Description 经历了一段艰辛的旅程后,主人公小P乘坐飞艇返回.在返回的途中,小P发现在漫无边际的沙漠中,有一块狭长的绿地特别显眼.往下仔细一看,才发现这是一个游乐场,专为旅途中疲惫的人设计. ...
-
Hibernate-注解
一, 为啥用注解 Hibernate注解使得原本放在xml文件中的信息直接表现在类中 为什么要用注解呢,因为注解可以简洁快速地在编写代码的同时实现映射关系 注解的好处就是语言简洁,即插即用. 坏处就 ...
-
scrapy_redis 相关: 将 jobdir 保存的爬虫进度转移到 Redis
0.参考 Scrapy 隐含 bug: 强制关闭爬虫后从 requests.queue 读取的已保存 request 数量可能有误 1.说明 Scrapy 设置 jobdir,停止爬虫后,保存文件目录 ...
-
vlc-ts
https://github.com/jiayayao/vlc_2.1.0-vs_2010 https://wenku.baidu.com/view/a0634d26336c1eb91a375d70. ...
-
在Azure DevOps Server (TFS 2019) 流水线传递参数
变量概述 在Azure DevOps Server的流水线中,变量是衔接不同任务和不通代理之间的桥梁,它可以使相对松散.各自独立的任务之间相关影响并共享数据.在流水线中使用变量,可以在各任务之间相互调 ...