px em rem 区别

时间 2019-11-25

标签 rem 区别栏目 CSS 繁體版

原文原文链接

PX：
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。可是这种方法存在一个问题，当用户在浏览器中浏览咱们制做的Web页面时，若是改变了浏览器的缩放，这时会使用咱们的Web页面布局被打破。这样对于那些关心本身网站可用性的用户来讲，就是一个大问题了。
所以，这时就提出了使用“em”来定义Web页面的字体。

EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术须要一个参考点，通常都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外，em是相对于父元素的属性而计算的，若是想计算px和em之间的换算，这个网站不错，输入数据就能够px和em相互计算。狠击这里：px和em换算
EM特色

1. em的值并非固定的；css

2. em会继承父级元素的字体大小。html

因此咱们在写CSS的时候，须要注意两点：css3

1. body选择器中声明Font-size=62.5%；浏览器

2. 将你的原来的px数值除以10，而后换上em做为单位；工具

3. 从新计算那些被放大的字体的em数值。避免字体大小的重复声明。布局


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

浏览器的兼容性
除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是全部浏览器都支持。
所以为了浏览器的兼容性，可“px”和“rem”一块儿使用，用"px"来实现IE6-8下的效果，而后使用“Rem”来实现代浏览器的效果。


选择使用什么字体单位主要由你的项目来决定，若是你的用户群都使用最新版的浏览器，那推荐使用rem，若是要考虑兼容性，那就使用px,或者二者同时使用。

在这里为你们提供一个px,em,rem单位转换工具字体

地址：http://pxtoem.com/网站

参考:http://www.w3cplus.com/css3/define-font-size-with-css3-rem