使用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>

结果如下：

巴特西

使用em和rem替代px

NOTICE

最新文章

热门文章