Rumah > hujung hadapan web > tutorial css > css中px、em、rem的区别是什么?

css中px、em、rem的区别是什么?

青灯夜游
Lepaskan: 2020-11-17 18:18:28
asal
8528 orang telah melayarinya

区别:px表示像素,是相对长度单位,是相对于显示器屏幕分辨率来设置字体大小的,不支持IE的缩放;em是相对长度单位,是相对于其父元素来设置字体大小的,支持IE的缩放;rem是相对长度单位,是相对HTML根元素来设置字体大小的。

css中px、em、rem的区别是什么?

推荐教程:CSS视频教程

PX,EM和REM的定义

px表示像素,不会因为其他元素的尺寸变化而变化。

像素的大小是会“变”的,也称为“相对长度”,越高位的像素,其拥有的色板也就越丰富,越能表达颜色的真实感。

em表示相对于父元素的字体大小,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作为单位就行了。

REM是相对单位,是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

CSS样式表中px、em和rem单位的特点

一般情况下,我们平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用,这主要是因为:

(1)、IE无法调整那些使用px作为单位的字体大小;

(2)、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

(3)、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

那么,css单位px、em和rem的特点分别是什么呢?

1、px的特点

PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。

但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破,这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。

因此,这时就提出了使用“em”来定义Web页面的字体。

2、em的特点

EM就是根据基准来缩放字体的大小,EM实质是一个相对值,而非具体的数值,这种技术需要一个参考点,一般都是以的“font-size”为基准,如WordPress官方主题Twenntytwelve的基准就是14px=1em。

通常来说,em有如下特点:

(1)、em的值并不是固定的;

(2)、em会继承父级元素的字体大小。

所以,我们在写CSS的时候,需要注意以下3点:

(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.2 * 12px=14.4px,这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.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。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题已经解决,只需在body选择器中把62.5%换成63%就能正常显示了,原因可能是IE处理汉字时,对于浮点的取值精确度有限,不知道有没有其他的解释和优化方法(关于更多细节的优化,可查看马海祥博客《看看那些能提高效率却容易被人忽略的CSS细节》的相关介绍)。

3、rem的特点

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。

EM是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,而Rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

下面就是一个例子:

p {font-size:14px; font-size:.875rem;}
Salin selepas log masuk

CSS样式表中px、em和rem单位的区别

通常情况下,我们区分px和em的差异就是说:px是绝对单位,不支持IE的缩放,em是相对单位,支持IE的缩放,其实,css单位em、px和rem的区别,详细来说,有以下几点:

1、PX:像素

PX是相对长度单位,它是相对于显示器屏幕分辨率而言的。

优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、EM

EM:是相对长度单位,EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

优缺点:EM的值并不是固定的,它会继承父级元素的字体大小。

PX和EM的之间的相互转换:

1.png

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么,12px=0.75em,10px=0.625em。

为了使用方便,用em时,我们通常在CSS中的body选择器中声明font-size=62.5%(使em值变为:16px*62.5%=10px),之后,你只需要将你使用的px值除以10,即可得到em值,如:12px=1.2em,10px=1em。

3、REM

REM是CSS3新增的一个相对单位,REM是相对单位,是相对HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

更多编程相关知识,请访问:编程教学!!

Atas ialah kandungan terperinci css中px、em、rem的区别是什么?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan