Understand em, rem, vh, vw

1. In

em is equivalent to "times", scaled with respect to the font size of the parent element of the element, such as a parent element 14px font size, font size 1.2em child element, is displayed 16px.

2、rem

r is the abbreviation for root, root scaling relative to the font size, when there is a nesting relationship, the relationship between the elements of the nested font size is always scaled by the root node font size.

3 articles

vh highly visible screen is the current 1%, that is

height: 100vh == height: 100%;

But it has the advantage that when the element has no content, set height: 100% of this element will not be softened,

But setting height: 100vh, the element is highly consistent distraction screen.

3、vw

vw is the current screen width of 1%

Add, when set width: 100%, the element width is set according to the width of the parent element set,

But 100vw is relative to the width of the screen is visible to set up, so the situation 50vw than 50% will be larger.

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <title>理解em、rem、vh、vw</title>
</head>
<style type="text/css" media="screen">
html{
    font-size: 14px;
}
body {
    /* padding: 0;
    margin: 0; */
}
.em,
.em> .em-son,
.em > .em-son > .em-grandson {
    font-size: 1.2em;
}
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
    font-size: 1.2rem;
}
.rem-box {
    background: #d60b3b;
    width:10rem;
    height: 10rem;
    color: #fff;
    text-align: center;
    line-height:5rem;
}
.vhvw-box { 
    Background : # d60b3b ; 
    width : 50vw ; 
    height : 50vh ; 
    Color : #fff ; 
    text-align = left : Center ; 
    Line-height : 25vh ; 
} 
</ style > 
< body > 
    < h1 of > HTML font size 14px </ h1 of > 
    < br > 

    < h1 of > EM inherited font size of the parent element to become larger or smaller, nested font changes </ h1 of > 
    <div class = "EM" > 
    Font Size 1.2 * 14 (parent element body) = 16px 
        < div class = "EM-Son" > 
        Font Size 1.2 * 16 (parent element EM) = 20px 
            < div class = "EM-Grandson" > 
            Font size 1.2 * 20 (Son-parent element EM) = 24px 
            </ div > 
        </ div > 
    </ div > 
    < br > 

    < h1 of > REM inherited root element font size, or smaller to larger, multi- nesting font without change </ h1 of > 
    < div class = "REM" > 
    Font size 1.2 * 14 (root HTML) = 16px 
        <div class = "REM-Son" > 
        Font Size 1.2 * 14 (root HTML) = 16px 
            < div class = "REM-Grandson" > 
            Font Size 1.2 * 14 (root HTML) = 16px 
            </ div > 
        </ div > 
    </ div > 
    < br > 

    < h1 of > REM may also be provided a wide hIGHER as a fixed length </ h1 of > 
    < div class = "REM-Box" > 
        width: 14 * 10 = 140px < br > 
        high: 14 * 10 140px = 
    </ div >
    <br> 
    < H1 of > VH, VW visible on the screen height of the region and 1% of the width of the </ h1 of > 
    < div class = "vhvw-Box" > 
        Width: 50% of the screen width < br > 
        high: 50% of the screen height 
    </ div > 
    < br >

　　　<- parent element width:! 100% child element width: 50vw wider than 50%

　　　　　　Because 50% of the width relative to the parent element, 50vw relative widths of the visible screen. Default margin can be removed first parent element, padding so that 50% == 50vh ->

    <div style="width: 100%;height: 300px;background: red;">
        <div style="width: 50vw;height: 50vh;background: yellow;"></div>
        <div style="width: 50%;height: 50vh;background: blue;"></div>
    </div>
</body>
</html>

Understand em, rem, vh, vw

Guess you like