rem 与 px 的换算关系

一、前言

响应式开发是现在前端潮流的开发方式，说到移动端的响应式开发，不得不说到一个单位 rem，那么 rem 单位是什么，有什么好处，与 px 单位有什么关系？

二、rem 概念

rem 是所有 DOM 节点对于根节点 html 的相对值。

三、rem 特点与换算

1. 浏览器默认的字号是16px，因此如果没有设置根节点 html 的字号，这将会是一个默认基数。
2. rem 与 px 的换算为 px = rem * 设置的根节点字号。

设置了根节点 html 字体大小
html{font-size:12px}
span{width:4rem;}
//span 的宽度换算为 px 为 4rem*12px = 48px
 
没有设置根节点 html 字体大小
span{width:4rem;}
//span 的宽度换算为 px 为 4rem*16px = 64px

四、注意

1. html 字体大小最小为 12px；如果设置为10px，则换算后的 px 依然按照 12px 计算

设置根节点 html 字体大小小于12px
html{font-size:10px}
span{width:4rem;}
//span 的宽度换算为 px 为 4rem*12px = 48px