使用em和rem替代px

rem是指根元素的字体大小，默认情况下html的字体大小为：16px=1rem。而em是相对单位，是基于它的祖先元素计算的。

如果我们不指定html和body的字体大小，要得到12px的rem需要这样计算：12/16=0.75rem

下面这张图em和px的转换关系是基于父元素是16px的情况下，所以rem也是这样的结果。

但是。这样换算总归有点麻烦，我们总不能写px的时候时刻被一张转换表或者计算器。

我们可以修改根元素html的字体：16*62.5%=10.4px ，约10px 现在，px与rem的关系是这样的：10px=1rem。

这样，我们要得到12px就简单多了：12px=1.2rem

 

通常，我们会给页面一个默认的12px字体，这样写：

html{font-size:62.5%}

body{font-size:1.2rem}

这一种写法的问题是，因为chrome的最小字体是12px，当我们设置html的font-size为62.5%时，计算出来的字体是10px，但是实际是12px，因此在应用过程中发现，我们使用rem的结果会比估计的篇大一点。

可以采用唯品会的这种写法：

html{font-size:312.5%;}
body{font-size:0.24rem}

 

NOTICE

在PC上调试时，需要使用Chrome浏览器，因为在使用360急速模式下，可能会发生下面的bug：

看下面的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        html{font-size: 62.5%}
        body{font-size:1.2rem;}
    </style>
    <title>em rem</title>
</head>
<body>
    <p>我不是12像素</p>
</body>
</html>

预览结果：

查看控制台computed样式：

16*1.2=19.2 ，可见，body中rem还是基于16px计算的，而不是10px。

但是对于其他元素而言，rem又是10px了，看第二个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        html{font-size: 62.5%}
        body{font-size:1.2rem;}
    </style>
    <title>em rem</title>
</head>
<body>
    <p>我不是12像素</p>
    <p style="font-size:1.2rem">我真的是12像素</p>
</body>
</html>

 结果如下：

 

posted on 2015-02-12 10:31  叫我钱了个浅  阅读(1306)  评论(0)  编辑  收藏  举报

导航