px 和 em
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要换算成物理 ...
随机推荐
- Spring Mvc Rest为不支持DELETE/PUT的浏览器添加DELETE/PUT支持
现在都流行RESTFul,但是有一个问题,有些浏览器现在就不支持delete/put方式的请求,这些请求发出去之后都会变成get请求,导致rest接口无法被访问到.为了解决这个问题,spring提出了 ...
- 【学】jQuery的源码思路4——增加一些功能
本文说一些简单的jQuery实现原理 eq() get() hide() show() index() find() //返回找到的一组元素中的第n个 zQuery.prototype.eq=func ...
- MVC中关于Membership类跟数据库的问题
Membership它们用的是ASPNETDB这个数据库,但我们可以使用我们自定义的数据库,然而除非我们自定义的数据库有着跟这个ASPNETDB一样的模式,否则ASP.NET提供的默认的SqlMemb ...
- shared_ptr 线程安全
Then what's really happening is TWO different sections of memory are being allocated. It's done at o ...
- background-position值为像素时的使用方法
以前一直都知道这个属性,但是每次使用的时候都是试来试去,感觉很麻烦,所以花了一点小时间研究了一下,很简单,跟大家分享一下. 此属性需要在background属性中使用,有关background属性的值 ...
- git上传到阿里云code
一.在阿里云code(kelude)注册用户,新建项目.二.安装Git后使用GitBash生产ssh key:(https://zhidao.baidu.com/question/1303468264 ...
- Beaglebone Black从零开始系列教程大汇总!
谁都有做菜鸟的时候,菜鸟不可怕,怕的是没有人指引前进的方向!本系列文章将逐个阐述BBB各个功能模块的基本使用方法.现在中文的BBB资料太少,它们是本人从全世界互联网的各个角落收集.学习.亲自测试得到的 ...
- 使用appium进行ios测试,启动inspector时遇到的问题(一)
最近在公司,让做ios的自动化测试,因为以前做过android的自动化测试,用的也是appium,觉得没什么,结果一开始在搭建环境就遇到了很多的问题,现在将我遇到的问题,以及解决方法,给大家分享出来. ...
- SQL语句的增删查改
一.增:有2种方法 1.使用insert插入单行数据: 语法:insert [into] <表名> [列名] values <列值> 例:insert into Strdent ...
- ant批量执行Jmeter脚本
JDK,Jmeter默认已经装了 ANT下载:http://ant.apache.org/bindownload.cgi ant环境变量需要配置 ant_home,你解压之后的地址 然后PATH环境变 ...