css中的px.rem.em

野性酷女 2021-12-19 22:17 238阅读 0赞

本文转自`https://blog.csdn.net/qq_36727756/article/details/91608614`

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 1]

## 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 2]  
从上述我们可以看到，div3单位设置rem后，其并没有根据body设置而变化，仍旧默认font-size：16px。所以为了方便，我们可以设置16px\*1.25=20px，其代表1em为20px，同样有利于我们计算。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70]: /images/20211219/20d3a84669c54fbfafdf776c1a46f41e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 1]: /images/20211219/ff8e3af507244f20a125d371abeea254.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70 2]: /images/20211219/3954ed7ef03e4d09a4c7e84860cbf013.png