rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

  1. |  px  |     rem       |
  2. ------------------------
  3. |  12  | 12/16 = .75   |
  4. |  14  | 14/16 = .875  |
  5. |  16  | 16/16 = 1     |
  6. |  18  | 18/16 = 1.125 |
  7. |  20  | 20/16 = 1.25  |
  8. |  24  | 24/16 = 1.5   |
  9. |  30  | 30/16 = 1.875 |
  10. |  36  | 36/16 = 2.25  |
  11. |  42  | 42/16 = 2.625 |
  12. |  48  | 48/16 = 3     |
  13. -------------------------

为了方便计算，时常将在<html>元素中设置font-size值为62.5%:

相当于在<html>中设置font-size为10px，此时，上面示例中所示的值将会改变：

  1. |  px  |     rem        |
  2. -------------------------
  3. |  12  | 12/10 = 1.2    |
  4. |  14  | 14/10 = 1.4    |
  5. |  16  | 16/10 = 1.6    |
  6. |  18  | 18/10 = 1.8    |
  7. |  20  | 20/10 = 2.0    |
  8. |  24  | 24/10 = 2.4    |
  9. |  30  | 30/10 = 3.0    |
  10. |  36  | 36/10 = 3.6    |
  11. |  42  | 42/10 = 4.2    |
  12. |  48  | 48/10 = 4.8    |
  13. -------------------------

由于rem是css3中的一个属性，很多人首先关注的就是浏览器对他的支持度，我截了一张caniuse对rem属性的兼容表：

从上图可以清楚的知道，rem在众多浏览器中都已得到很好的支持，如果您的项目不用考虑IE低版本的话，你就可以放心的使用了。

em 以父元素为参照

rem 和 em 一样，也是一个相对大小的值，它是相对于根元素 <html>，比如假设，我们设置 html 的字体大小的值为 html｛font-size: 87.5%;｝（也就是 14px，这是 twentytwelve 默认主题里的设置）。然后其他的字体就是将你要的值除以 14 得到的值；比如默认的twentytwelve主题大小是 960px；换算成 rem 就是 960/14=68.57142857142857rem（我这个用电脑的计算器计算的，比默认的更精确，嘿嘿）；padding 的 24px 也就是 24/14=1.714285714285714rem（当然还是比 css 文件里的精确），以此类推。

简单直白的说法，可以用评论里同学的一句话来表达：

如果你没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px，那 1rem 就为 20px。

上面的 14 是个变量，相对于你对根元素 html 字体大小的设定，如果你设定的是 62.5%，那除数就变成 10 了，对照表如右图：

用这个 rem 单位的好处有啥我不知道，不过如果你根元素的字体大小选 62.5%，那 px 和 rem 之间的换算就是 px 直接除以 10 就得到 rem 了，这比 em 简单多了，到现在我都没搞清楚 em 和 px 之间是如何换算的。

另外 rem 在 ie8 及以下的版本不支持外其他浏览器都支持，如果你要考虑 ie8 及一下，可以像 twentytwelve 默认文件那样设置个 px 再设置个 rem 就可以了。

再另外，有许多朋友问我：为啥 html 设置成 62.5%，或者 10px 时，这种换算无效了呢？经过研究发现，不知道什么时候开始，小于 12px 或者 75% 的字体大小 rem 确实不支持这种换算，这可能与现在有些浏览器不支持 12px 以下的大小有关。所以，记住一点：如果要使用 rem 单位，html 的字体默认大小必须设置为 12px 或以上才行。

rem、em、px之间的转换的更多相关文章

  1. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  2. rem与px之间的换算（移动端）

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  3. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  4. Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换)

    Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换) Android中dp和px之间进行转换 在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情 ...

  5. 【转】Android中dip(dp)与px之间单位转换

    Android中dip(dp)与px之间单位转换 dp这个单位可能对web开发的人比较陌生,因为一般都是使用px(像素)但是,现在在开始android应用和游戏后,基本上都转换成用dp作用为单位了,因 ...

  6. Android中dp和px之间进行转换

    在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致.但是在代码中,如何处理呢?很多控件的方法中都只提供了 ...

  7. Android笔记之dp与px之间的转换以及LayoutParams

    dp与px之间的转换公式 px = dp * (dpi / 160) dp = px / (dpi / 160) 其中dpi的获取方式如下 private void getDpi() { Displa ...

  8. 字体的设置 REM EM PX

    px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...

  9. dp与px之间的转换

    代码如下: package com.example.fxvideo.utils; import android.content.Context; public class DensityUtils { ...

随机推荐

  1. spring开篇

    本文引用http://www.cnblogs.com/ityouknow/p/5292559.html spring简介: spring是一个开源框架,spring是于2003 年兴起的一个轻量级的J ...

  2. nginx虚拟主机搭建

    nginx [engine x]是 Igor Sysoev 编写的一个 HTTP 和反向代理服务器,另外它也可以 作为邮件代理服务器. 它已经在众多流量很大的俄罗斯网站上使用了很长时间,这些网站包括 ...

  3. 解决scp命令pemission denied,please try again的问题

    问题描述:输入命令scp a.txt root@192.168.0.105:/tmp(将当前目录下的文件a.txt复制到服务器IP为192.168.0.105的root用户的/tmp/目录下),结果会 ...

  4. iar注释快捷键

    选中多行后注释快捷键:Ctrl+K 取消多行注释快捷键:Ctrl+Shift+K

  5. POJ ：3614-Sunscreen

    传送门:http://poj.org/problem?id=3614 Sunscreen Time Limit: 1000MS Memory Limit: 65536K Total Submissio ...

  6. spring整合redis缓存，以注解(@Cacheable、@CachePut、@CacheEvict)形式使用

    maven项目中在pom.xml中依赖2个jar包,其他的spring的jar包省略: <dependency> <groupId>redis.clients</grou ...

  7. 用 Flask 来写个轻博客

    用 Flask 来写个轻博客 用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写个轻博客 (3) — (M)V ...

  8. mysql错误：Column ‘id’ in field list is ambiguous的解决方法

    [Err] 1052 - Column 'modify_time' in where clause is ambiguous 出错的语句: SELECT AVG(T.se)%60FROM( SELEC ...

  9. Leetcode 658.找到K个最接近的元素

    找到k个最接近的元素 给定一个排序好的数组,两个整数 k 和 x,从数组中找到最靠近 x(两数之差最小)的 k 个数.返回的结果必须要是按升序排好的.如果有两个数与 x 的差值一样,优先选择数值较小的 ...

  10. vue 三目运算

    :class="followed ? 'btn-success':'btn-secondary'"