VW - Code World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0
        }
        html,body{
            height:100%;
        }
        body{
            display:flex;
            flex-direction: column;
        }
        html{
            font-size:31.25vw;
            /*1rem == 100px*/
        }
        header{
            height:0.44rem;
            background:green;
            font-size:12px;
        }
        nav{
            height:0.35rem;
            background:orange;
        }

        main{flex:1;}
        footer{
            height:0.44rem;
            background:blue;
        }


        @media all and (min-width:321px) and (max-width:375px){
            header{
                font-size:16px;
            }
            footer{}
        }
    </style>
</head>
<body>
    <Header> text </ header>
    <nav></nav>
    <main></main>
    <footer></footer>
</body>
</html>
<!-- 
    100px ==? Vw
    design diagram! ! ! ! !
    640px    750px    1080px
dpr: 2 2 3


    Example 1: If the graph 640px by design;
        Consider dpr 2
        640px  /  2 == 320px;

        320px == 100vw;

        3.2px == 1vw;
        100px == 31.25vw;


        Specific implementation: Measure height: 88px dpr 2 88px / 2 == 44px
            44px / 100 == 0.44rem;


        Remember death! ! : If the design Pictured 640px
                      Html set to { font-size : 31.25vw }
                      Measure the size 76px 76 / dpr == 38px;
                      38px / 100 == 0.38rem;




    Example: Design Pictured 750px;
        Demand: 100px == vw;?

        dpr 2
        750px / 2 == 375px  

        100vw == 375px;

        1vw == 3.75px;;
        26.67vw == 100px;

        Remember death! ! ! If the design Pictured 750px
                     Html set to { font-size : 26.67vw }
                     Measure the size 54px 54px / 2 == 27px;
                     27px / 100 == 0.27rem
 -->
VW

Guess you like
