美文网首页
长度单位 em rem vw vh

长度单位 em rem vw vh

作者: 洪锦一 | 来源:发表于2021-10-08 17:31 被阅读0次

    em

    官方解释:CSS1 长度单位 em,相对于当前对象内文本的字体尺寸

    我的解释:1em=父标签的font-size

    em是根据父标签的font-size变化的 ,如果父标签没有设置 font-size 一直往上找

    比如:2em就等于24px

    <div style="font-size:12px">
        <p style="font-size:2em"></p>
    </div>
    

    Demo.html

    <!DOCTYPE html>
    <html lang="en"> 
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {font-size: 12px;} 
            .div1 {font-size: 12px;} 
            .size1 {font-size: 1em;} 
            .size2 {font-size: 2em;} 
            .size3 {font-size: 3em;} 
            .div2 {width: 66em;height: 300px;background-color: #efefef;}
        </style>
    </head 
    <body> 
        <div class="div1">
            <p class="size1">我是p标签</p>
            <p class="size2">我是p标签</p>
            <p class="size3">我是p标签</p>
        </div>
    
        <div class="div2">
            <p>我是div2</p>
        </div> 
    </body> 
    </html>
    

    rem

    官方解释:CSS3 长度单位 rem ,相对于根元素(即html元素)font-size计算值的倍数

    我的解释:1rem=html的font-size 默认是16px

    rem是根据html的font-size变化的

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html {
                font-size: 30px;
            }
            div{width: 30rem; height: 6rem;font-size: 100px; background-color: rgb(192, 190, 190);}
            div p{font-size: 2rem;} 
        </style>
    </head>
    
    <body>
        <span>html字体大小</span>
        <div>
            <p>测试rem</p>
        </div>
    </body>
    
    </html>
    

    vw

    相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

    h1{font-size:8vw;}
    

    如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100

    vh

    相对于视口的高度。视口被均分为100单位的vh

    h1{font-size:8vh;}
    

    如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100

    相关文章

      网友评论

          本文标题:长度单位 em rem vw vh

          本文链接:https://www.haomeiwen.com/subject/rcbxoltx.html