em和px

在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有一部法律来约束他们—例如美国的Section 508,强制网站达到一定的易用性。

关键点:   1. IE无法调整那些使用px作为单位的字体大小;
  2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
  3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
  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处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

转自:http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html

时间: 2024-10-23 23:54:59

em和px的相关文章

学习CSS了解单位em和px的区别

学习CSS了解单位em和px的区别 2007-11-11 20:17:25  来源:网页教学网收集整理 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em作为字

em 和 px相互转换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function convert (id) { var px_val = document.getElementById('pxToEm').value, em_val = document.getEle

响应式——em,rem,px

进一步了解了em,rem,px PX像素,相对长度单位.像素px是相对于显示器屏幕分辨率而言的,在做Web页面时,我们都用px来设置文本,px比较稳定和精确,但是这种方法有一问题,就是当用户在浏览器中浏览我们做的Web网页时,它改变了浏览器的字体大小,这会使用我们的Web页面布局被打破.这时就可以用em来定义Web页面的字体. EM也是相对长度单位,相对于当前对象文本的字体尺寸,如果当前对文本的字体大小没有被设置,就相当于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px em需要一个参

css单位em、px、rem和pt的区别

1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM是相对于父元素来设计字体大小的.如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 优缺点:EM的值并不是固定的,它会继承父级元素的字体大小. EM和PX的之间的相互转换: 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.7

CSS字体大小: em与px、pt、百分比之间的对比

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争论.找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答. 接触这些单位 1.  “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示.一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt.Ems在本质上是可伸缩的,所以2 em相当于

rem和em和px vh vw和% 移动端长度单位

1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了, em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事

css中em与px的区别

学习CSS了解单位em和px的区别 2007-11-14 10:12 来源:cz268.com.cn 编辑:阿小[纠错]人评论 A-A+ 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为 1.IE无法调整那些使用px作为单位的字体大小: 2.国外的大部分网站能够

rem,em,与px的比较用法

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小.让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀.师

如何将px换成em,px与em区别是什么?

字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应.px是绝对单位,不支持IE的缩放,em是相对单位. 我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em.保证缩放时候的整体性. 怎么将px换成em呢?特地转jorux06年12月的一篇文章,因为中文站用px的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教: em是何物? em指字体高,任意浏

em,rem,px之间的转换

::>_<::我们在写css样式时,经常会遇到字体大小在不同的浏览器不同的设备上显示不一致的情况,一般有这几种单位可供开发者选择:em,rem,px.下面我就介绍一下这几种单位 一.px:是像素(Pixel)的简写.相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器