在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解：
em与px转换
一般浏览器默认1em=16px，通过设置font-size大小来代表如：16px*0.625=10px，其则代表1em=10px，直接上代码(注释的样式为浏览器默认 （1em=16px）的长宽)：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{font-size: 16px;}
/*1em=10px*/
/*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
/*#div2{width:200px;height:200px;margin:0 auto;}*/
#div2{width:12.5em;height:12.5em;margin:0 auto;}
/*#div3{width:480px;height:320px;margin:80px auto;}*/
#div3{width:30em;height:20em;margin:5em auto;}
</style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
<div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>
下面直接上图：
1122162301.png
在进行转换之前，我们一定要查看浏览器默认字体（最小）大小，如chrome浏览器，默认字体最小为12px，所以即使我们为了方便设置1em=10px，其浏览器仍旧以1em=12px计算。
16px*0.75=12px=1em
body{font-size: 12px;}
或者{font-size: 75%;}
下图是执行结果：
11221032902.png
em与rem区别
rem与px，和em与px转换是一样的，二者区别在于前者默认从根元素继承，后者从父级元素继承，还是上述代码，html我们不设置font-size，其默认为16px，上代码展示（div3单位我们修改为rem）：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{font-size: 12px;}
/*1em=10px*/
/*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
/*#div2{width:200px;height:200px;margin:0 auto;}*/
#div2{width:12.5em;height:12.5em;margin:0 auto;}
/*#div3{width:480px;height:320px;margin:80px auto;}*/
#div3{width:30rem;height:20rem;margin:5rem auto;}
</style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
<div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>
下面是输出结果：
1122123503.png
从上述我们可以看到，div3单位设置rem后，其并没有根据body设置而变化，仍旧默认font-size：16px。所以为了方便，我们可以设置16px*1.25=20px，其代表1em为20px，同样有利于我们计算。
网友评论