VW - 代码天地

<!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>文本</header>
    <nav></nav>
    <main></main>
    <footer></footer>
</body>
</html>
<!-- 
    100px  ==  ?vw
    设计图！！！！！
    640px    750px    1080px
dpr:  2        2         3


    例子1：如果设计图为640px;
        考虑dpr 2
        640px  /  2 == 320px;

        320px == 100vw;

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


        具体实现：量出height:88px  dpr   2   88px / 2 == 44px
            44px / 100 == 0.44rem;


        死记住！！：   如果设计图为640px 
                      给html设置{font-size:31.25vw}
                      量出大小 76px    76 / dpr == 38px;
                      38px / 100 == 0.38rem;




    例子：设计图为750px;
        需求：100px == ?vw;

        dpr     2
        750px / 2 == 375px  

        100vw == 375px;

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

        死记住！！！  如果设计图为750px
                     给html设置{font-size:26.67vw}
                     量出大小54px    54px / 2 == 27px;
                     27px / 100 == 0.27rem
 -->
VW

猜你喜欢
