css单位em、px和rem

在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将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>

    

结果如图所示：

在进行转换之前，我们一定要查看浏览器默认字体（最小）大小，如chrome浏览器，默认字体最小为12px，所以即使我们为了方便设置1em=10px，其浏览器仍旧以1em=12px计算。
16px*0.75=12px=1em

 body{font-size: 12px;}
 或者{font-size: 75%;}

    

结果如图所示：

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>
结果如图所示：



从上述我们可以看到，div3单位设置rem后，其并没有根据body设置而变化，仍旧默认font-size：16px。所以为了方便，我们可以设置16px*1.25=20px，其代表1em为20px，同样有利于我们计算。
      </div>
      <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
              </div>