css中的px,em,rem

·##概念介绍:
1.px(pixel,像素):是一个虚拟长度单位,是计算机系统的数字化长度单位,如果px要换算成物理长度,需要制定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpiApple系统默认是72dpi。
2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用类似百分比,如:0.8em,1.2em,2em等。通常1em=16px。
3.rem(root em,根em):是CSS3新增的一个相对单位,这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在与使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点与一身,通过它既可以做到只修改根元素就成比列的调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早的版本以外,所有的浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略rem设定的字体大小。

1.em和px的问题

px为何物?
px像素(pixel)。相对长度单位。像素px数计相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位,相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

px的特点
1.IE无法调整那些使用px作为单位的字体的大小;
2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3.Firefox能够调整px和em,rem,但是96%以上的中国网民使用的是IE浏览器(或内核)。

em是何物?
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的特点**:
1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体都是16px。因此,12px=0.75em。实际应用中为了方便换算,通常会设置如下样式:
CSS代码
html{font-size:63%;}

在中文的文章中,一般会在段首空两格。如果用px作为单位,对12px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px... ...这样的换算非常不通用,如果用上em单位,这个问题就很好的解决了,1个字体的大小就是1em,那么两个字体的大小就是2em。因此,只需这样定义就可以了:
CSS代码
**p{text-indent:2em;} **

em和px两种字体单位的区别
字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有响应。px是绝对单位,不支持IE的缩放,em是相对单位。
不仅仅是字体,将行距(line-height)和纵向高度的单位都用em,可以保证缩放时候的整体性。

em有如下特点:
1.em的值并不是固定的;
2.em会继承父级元素的字体大小。

em重写步骤
1.body选择器中声明Font-size=62.5%;
2.将你原来的px数值除以10.然后换上em作为单位;
简单点吧,如果只需要以上两步就能解决的话,可能就没人用px了。经过以上两步,你会发现你的网站字体打得超乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里面把字体设置为1.2em,也就是12px,然后你又把选择器p的字体大小也设置为1.2em,但如果p属于content的子级的话,p的字体大下就不是12px,而是1.2em=1.212px=14.4px。这是因为content的字体大小被设为1.2em,这个em值就继承其父级元素body的大小,也就是16px62.5%1.2=12px,而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而设计后14.4px。
3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2
1.2=1.44的现象。比如说你在#content中声明了字体的大小为1.2em,那么在声明p中的字体大小时就只能是1em,而不是1.2em,因为此em非彼em。它因继承#content的字体高而变成了1em=12px。

IE中的12px汉字:
完成em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE忠并不等于直接用12px定义的字体大小,而是稍大一点。你只需在body选择器中把62.5%换成63%就能很正常显示了。原因可能是IE处理汉字时们对于浮点的取值精度有限,本现象只发生在12px的汉字,英文不存在此现象。解决方法就是把style.css的62.5%换为63%。

一个px,em,pt单位转换工具:
地址:http://pxtoem.com/

2.rem的特点

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem伪元素设置字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有的字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早的版本外,所有的浏览器均支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体的大小。
举例:
p{font-size:14px;font-size:0.875rem;}
注意:选择用什么字体单位主要由你的项目来决定,如果你的用户群都是用最新版本的浏览器,那推荐使用rem,如果考虑兼容性,那就是用px或者两者同时使用。

参考博客:http://www.mamicode.com/info-detail-655497.html

推荐阅读更多精彩内容

  • 直奔主题! 一,px ---- 像素(Pixel)。 相对长度单位。 像素px是相对于显示器屏幕分辨率而言的,作为...
    远眺北极熊阅读 835评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,730评论 1 91
  • 概念介绍 px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长...
    柯琦阅读 1,253评论 0 7
  • 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点1...
    xixihaha520阅读 245评论 0 0
  • 雨杭分享: 今天思瑶老师的<爱是生命的至美>课程完美诠释了情感 两性关系 1.思瑶老师一看见我,对我笑着说:雨杭好...
    感恩女神诗淘阅读 61评论 0 2