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

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

|  px  |     rem       |

------------------------

|  12  | 12/16 = .75   |

|  14  | 14/16 = .875  |

|  16  | 16/16 = 1     |

|  18  | 18/16 = 1.125 |

|  20  | 20/16 = 1.25  |

|  24  | 24/16 = 1.5   |

|  30  | 30/16 = 1.875 |

|  36  | 36/16 = 2.25  |

|  42  | 42/16 = 2.625 |

|  48  | 48/16 = 3     |

-------------------------

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

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

|  px  |     rem        |

-------------------------

|  12  | 12/10 = 1.2    |

|  14  | 14/10 = 1.4    |

|  16  | 16/10 = 1.6    |

|  18  | 18/10 = 1.8    |

|  20  | 20/10 = 2.0    |

|  24  | 24/10 = 2.4    |

|  30  | 30/10 = 3.0    |

|  36  | 36/10 = 3.6    |

|  42  | 42/10 = 4.2    |

|  48  | 48/10 = 4.8    |

-------------------------

由于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. IDEA 工具项目的配置及如何打war包

    1. Project Structure 1.1 首先点击File-ProjectStructure,进入项目配置: 2.Project Settings配置 2.1 Project  2.1.1 f ...

  2. PHP continue和break的用法（深入理解）

    对于刚入门的PHP童鞋们来说,在循环体中的continue和break的作用总是分不清到底是什么意思, 怎么用, 两者到底有什么区别? 接下来说几个例子,其实它们是很好区分的. <?php $t ...

  3. 华为模拟器ensp安装教程

    华为模拟器说实话有时候真的是很烦人,总是莫名其妙的出问题,而且网上教程一般也解决不了 因此我认为学会ensp的重装真的很重要,因此只要我们删除干净了,安装最多花不了20分钟的时间 接下来我就来说说怎么 ...

  4. Fruits【水果】

    Fruits Many of us love July because it's the month when nature's berries and stone fruits are in abu ...

  5. C语言进阶——浮点数的秘密03

    浮点数在内存中的储存方式为:符号位 指数位 尾数 float和double类型的数据在计算机内部的表实方法是一样的,但是由于所占的存贮空间的不同,其分别能表示的数值范围和精度不同. 类型 f符号位 指 ...

  6. [BZOJ1899]Lunch 午餐（DP）

    [BZOJ1899] 首先有个很贪心的思路,吃饭时间长的最先打饭为最优,所以开始先排个序 然后考虑DP,我们不需要知道某个人在哪个对,只要关注总的时间就行了 肯定需要一维表示当前同学编号,还需要表示某 ...

  7. Oozie 之 sqoop 实战

    1.创建 lib 目录并拷贝 mysql 支持包 2.修改 job.properties 文件 nameNode=hdfs://cen-ubuntu.cenzhongman.com:8020 jobT ...

  8. php导出数据为CSV文件DEMO

    代码示例: private function _download_send_headers($filename) { // disable caching $now = gmdate("D, ...

  9. Linux编译安装与配置-MySQL（5.5，5.6）版本系（笔记）

    MySQL 5.5(5.6)后版本,需要使用cmake(Cross make , https://cmake.org/ )编译 我的环境如下: VMWare虚拟机,CentOS 5.5 x86_64( ...

  10. android SharedPreferences 浅析

    1. 介绍:SharedPreferences 的作用是使用键值对的方式存储数据.且支持多种不同的数据类型存储: Android数据持久化方法中最简单的一种,即使用Preferences的键值对存储方 ...