09-px与em的区别

2018-01-30  本文已影响13人  _信仰zmh

简单的说说 px 、em 和 rem 的区别


* 个人初步认知:

在前端页面开发初期,特别是给页面添加样式的时候,免不了碰到px与em,

简单的认为两者都可以设置字体的大小,但也有一些细微的差别,px直接就是像素值,取值可正可负,可以设置字体的大小,也可以设置元素的宽高属性,定位的坐标等,特别需要注意的是,在Chrome浏览器中,默认的最小字体是12px,即使设置字体大小低于12px,也是无效的;

而em可以简单理解为一个单位,它的大小并不固定,它继承父类元素的字体大小,通常成倍数关系,即如果父类元素字体为12px,设置字体大小为1.5em即为18px;

rem是 root em的意思,它是虽然也是一个长度单位,但它指向元素的根

PX:

PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

EM:

em就是根据基准来缩放字体的大小。em实质是一个相对值,而非具体的数值。

这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。

另外,em是相对于父元素的属性而计算的,如果想计算px和em之间的换算,这个网站不错,输入数据就可以px和em相互计算。

Rem:

em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。

浏览器的兼容性

除了IE6-IE8,其它的浏览器都支持em和rem属性,px所有浏览器都支持。
因此为了浏览器的兼容性,可“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。

px, em , rem 的区别?

1.px 是一个绝对字体的大小, em则是基于基数来计算出来的相对字体大小,这个基数是需要乘以当前对象从其父级遗传字体大小。
1.5em = 父级字体大小 * 1.5 = ?

  1. em 存在什么问题?
    就是在CSS中想要知道当前元素的字体大小所遗传的是哪个父级元素的字号?
  2. 解决方案?
    rem的出现就很好的解决了这个问题,rem 是基于根节点(比如html)的字体大小进行计算的
    1.5rem = 默认字体大小(比如:16px)* 1.5 = 24px

为了更方便的进行计算转换,你可以把默认字体大小设置成62.5%或者是10px,这个时候你要计算当前元素字体大小的时候,你就可以这样:
28px = 28/10 = 2.8rem

rem的浏览器支持

目前大多数浏览器都支持rem单位的字体大小,不过,要想兼容IE7和IE8,你还是需要使用px来做单位。写法如下:


html { font-size: 62.5%; }
p { font-size: 15px; font-size: 1.5rem; } /* =15px */

上一篇 下一篇

猜你喜欢

热点阅读