前言
根据 W3C 规范中对 1rem 的定义：
1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。
这就意味着 1rem 等于 html 元素的字体大小（大部分浏览器根元素的字体大小为16px）
兼容性
ios：6.1系统以上都支持
android：2.1系统以上都支持
大部分主流浏览器都支持，可以安心的往下看了。
rem：（font size of the root element）
意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的，举一个简单的例子，
现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px，即
html {
font-size:16px;
}
那么如果我们想给一个P标签设置12px的字体大小，那么用rem来写就是
p {
font-size: 0.75rem; //12÷16=0.75（rem）
}使用rem这个字体单位进行适配，就是利用它作为一个全局字体固定参照单位的特性。如果改变html元素的字体大小，rem的值也就跟着改变，对应的其他使用rem的布局尺寸，也会跟着改变，从而达到适配的目的，保证比例一致。 **所以rem不仅可以适用于字体，同样可以用于width height margin这些样式的单位。**
rem适配具体实现方案：
设计稿尺寸宽度为750px，如果设计稿是640px，下边js会自动计算rem的值（比如rem:75px -> rem: 64px），具体的尺寸rem不用调整（例如 padding: 1.5rem，不用调整，这是一个比例大小），对应的元素大小px值会根据新的rem（比如rem: 64px, padding等于 1.5 * 64）改变，从而按照比例适配。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>rem适配</title>
<script>;
最低0.47元/天 解锁文章
6374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
