rem

版本： CSS3

rem：这个单位代表根元素的 font-size 大小（例如元素的font-size）。当用在根元素的 font-size 上面时，它代表了它的初始值。

浏览器支持


IE9以上版本的浏览器都支持 `rem`

说明：

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

rem全称font size of the root element，指相对于根元素字体大小的单位。之前他还有个兄弟：em

使用

首先是设置根元素，也就是html的字体大小。比如我们设置为10px

html{font-size:10px;}

然后就可以灵活的控制啦。最终.btn的宽度为60px

.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

不同分辨率下的font-size

html{font-size: calc(100vw/7.5);//100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于100px。}

由于rem是相对于根节点元素大小的单位，遂当设备宽度改变时，采用rem布局的大小均会跟随相同比例变化，从而实现整体缩放。

首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下，（当然这个尺寸肯定不一定是640，可以是320，或者480，又或是375）来看一组表格。页面是以640的宽度去切的，怎么计算不同宽度下font-site的值，大家看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

两个深坑

我看了网上很多关于rem的资料，基本都说浏览器的默认字号就是16px，然后直接定义font-size:62.5%。但是，rem属于css3的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px，那么上面的10/16换算就不成立，直接给html定义font-size: 62.5%不成立。
chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10px就变成1rem=12px，出现偏差（下面给demo）。

解决方案 ：将1rem=10px 换为 1rem=100px（或者其它容易换算的比例值）;不要在pc端使用rem。

那么上面的页面根元素样式要改为：

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

再用本工厂总结得出的各分辨率媒体查询换算：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

根据屏幕大小而动态改变，可以推算出公式：

屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50）

实例

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8"/>
<title></title>

<style>
html,
h1{
	font-size:12px;
}
p{
	font-size:2rem;
}
</style>
</head>
<body>
	<h1>下面的文字将是html定义的字体大小的2倍：</h1>
	<p>我是html定义的12px的2倍，字体大小为24px</p>
</body>
</html>

效果图：

返回CSS导航

rem

浏览器支持

说明：

使用

不同分辨率下的font-size

实例