（转）px、em、rem的区别和使用

 

        国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem（国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位），那么三者有什么区别，又各自有什么优劣呢？

一、px特点

1. IE无法调整那些使用px作为单位的字体大小；

2. Firefox能够调整px和em，rem，但是很多的中国网民使用IE浏览器(或内核)。

 

px像素（Pixel）：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

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

 

       任意浏览器的默认字体高都是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的字体高而变为了1*1.2em=12px。

rem特点 

        rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

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

 

在这里为大家提供一个px,em,rem单位转换工具

地址：http://pxtoem.com/

 

     我们在页面布局时使用常用的单位是px，这是一个绝对单位，web app的屏幕适配有很多中做法，例如：流式布局、限死宽度，还有就是通过响应式来做，但是这些方案都不是最佳的解决方法。

1、流式布局

例如流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果。流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多的bug，还有就是对设计师的设计有很多的限制，因为他们在设计之初就需要考虑流式布局，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

2、限死宽度

还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕下看起来页面会特别小，手机淘宝首页起初是这么做的，但近期改版了，可是天猫首页还没改版。

3、响应式

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

4、设置viewport进行缩放

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到426都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效。

5、rem能等比例适配所有屏幕

    上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案，接下来讲下rem是如何工作的。

    上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子：

1. html{
2.     font-size:20px;
3. }
5. .btn {
6. 6rem;
7. height: 3rem;
8. line-height: 3rem;
9. font-size: 1.2rem;
10. display: inline-block;
11. background: #06c;
12. color: #fff;
13. border-radius: .5rem;
14. text-decoration: none;
15. text-align: center;
16. }

Demo

上面代码结果按钮大小如下图：

我把html设置成10px是为了方便我们计算，为什么6rem等于60px。如果这个时候我们的.btn的样式不变，我们再改变html的font-size的值，看看按钮发生上面变化:

1. html{
2.     font-size:40px;
3. }

Demo

按钮大小结果如下：

     上面的width，height变成了上面结果的两倍，我们只改变了html的font-size，但.btn样式的width,height的rem设置的属性不变的情况下就改变了按钮在web中的大小。

其实从上面两个案例中我们就可以计算出1px多少rem:

第一个例子：

120px = 6rem * 20px(根元素设置大值)

第二个例子：

240px = 6rem * 40px(根元素设置大值)

推算出：

10px  = 1rem 在根元素（font-size = 10px的时候）；

20px  = 1rem 在根元素（font-size = 20px的时候）；

40px  = 1rem 在根元素（font-size = 40px的时候）；

    在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮，html font-size的改变就会导致按钮的大小发生改变，我们并不需要改变先前给按钮设置的宽度和高度，其实这就是我们最想看到的，为什么这么说？

    由上面demo中我们知道改变html的font-size可以等比改变所有用了rem单位的元素，所以大家可以通过chrome浏览器的调试工具去切换第三个的demo在不同设备下的展示效果，或者通过缩放浏览器的宽度来查看效果，我们可以看到不管在任何分辨率下，页面的排版都是按照等比例进行切换，并且布局没有乱。我只是通过一段js根据浏览器当前的分辨率改变font-size的值，就简单的实现了上面的效果，页面的所有元素都不需要进行任何改变。

  Dome

    到这里肯定有很多人会问我是怎么计算出不同分辨率下font-size的值？

    

    首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下，（当然这个尺寸肯定不一定是640，可以是320，或者480，又或是375）来看一组表格。

    上面的表格蓝色一列是Demo3中页面的尺寸，页面是以640的宽度去切的，怎么计算不同宽度下font-site的值，大家看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

    

 Demo3中我是通过JS去动态计算根元素的font-size，这样的好处是所有设备分辨率都能兼容适配，所用JS代码如下：

1. (function (doc, win) {
2. var docEl = doc.documentElement,
3. resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
4. recalc = function () {
5. var clientWidth = docEl.clientWidth;
6. if (!clientWidth) return;
7. docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
8. };
10. if (!doc.addEventListener) return;
11. win.addEventListener(resizeEvt, recalc, false);
12. doc.addEventListener('DOMContentLoaded', recalc, false);
13. })(document, window);

淘宝首页目前html font size就是用的JS计算，但其实不用JS我们也可以做适配，一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置也可以实现适配，例如下面这样：

1. html {
2. font-size : 20px;
3. }
4. @media only screen and (min-width: 401px){
5. html {
6. font-size: 25px !important;
7. }
8. }
9. @media only screen and (min-width: 428px){
10. html {
11. font-size: 26.75px !important;
12. }
13. }
14. @media only screen and (min-width: 481px){
15. html {
16. font-size: 30px !important;
17. }
18. }
19. @media only screen and (min-width: 569px){
20. html {
21. font-size: 35px !important;
22. }
23. }
24. @media only screen and (min-width: 641px){
25. html {
26. font-size: 40px !important;
27. }
28. }

    上面的做的设置当然是不能所有设备全适配，但是用JS是可以实现全适配。具体用哪个就要根据自己的实际工作场景去定了。

    下面推荐两个国内用了rem技术的移动站，大家可以上去参考看看他们的做法，手机淘宝目前只有首页用了rem，native app的首页是内嵌的web app首页。

淘宝首页：m.taobao.com

D X：m.dx.com

最后我们再来看一看他的兼容性：

转载请注明来自 520UED http://www.520ued.com/article/549125815f85b6b44ca20b2b