px-em-rem单位转换

Posted 鱼樱、、

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了px-em-rem单位转换相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>px-em-rem</title>
        <style type="text/css">
        html{
            font-size: 15px;
        }
        body{
            font-size: 20px;
        }
            .px{
                width: 100px;
                height: 100px;
                background: yellow;
            }
            .em{
                width: 100em;   /*1em = 16px;  参照是父元素*/
                height: 100em;
                background: red;
            }
            .rem{
                width: 100rem;  /*1rem = 16px; 参照是根元素*/
                height: 100rem;
                background: blue;
                
                /*0.4*font-size=40px;  font-size=100px;
                 0.4*font-size=50px;  font-size=125px;
                 * */
            }
            .father{
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class="px"></div>
        <div class="father">
            <div class="em"></div>
        </div>
        
        <div class="rem"></div>
        
    </body>
</html>

 

以上是关于px-em-rem单位转换的主要内容，如果未能解决你的问题，请参考以下文章

在代码片段中包含类型转换

sql 日期转换代码片段 - Dato，120，konvertere

HTML Bookmarklet模板：将任何JavaScript代码片段转换为Bookmarklet

如何以毫秒为单位获取javaFX音频片段的长度[关闭]

结合两个代码片段？将用户输入的 Youtube url 转换为嵌入 url，然后将 iframe src 替换为转换后的 url

VSCode配置