响应式布局em/rem/vh/vw的理解

响应式布局em和#### em的定义

em只继承父级元素
1em=16px
em是用于设定font-size,padding,margin,border-radius等元素
em在嵌套时，<1em时会逐级变小，>1em时会逐级变大
边框不要用em,因为如果用em,会根据字体大小变化，效果会很难看

案例

    <style>
        :root {
            font-size: 0.75em;
        }
        body {
            background-color: aquamarine;
        }
        @media screen and (min-width: 500px) {
        body {
            background-color: red;
            font-size: 2em;
        }
        }
        @media screen and (min-width: 800px) {
        body {
            background-color:yellow;
            font-size: 3em;
        }
        }
    </style>
</head>
<body>
    <p>当屏幕宽度大于500px时，屏幕变红,字体变为2em；当屏幕宽度大于800px时，屏幕变黄，字体变为3em</p>
</body>

图样

rem的定义

rem是root em的缩写，一般用于设定字号
rem继承的是根元素root的值进行计算
rem一般用于font-size中用于设置字号，但尽可能不用在：root上

案例

    <style>
        :root {
            font-size: 0.75em;
        }
        ul {
            font-size: 1.1em;
        }
        /*当设置为rem时，font-size继承的是根目录的值,因此，他就不会逐级变大*/
        ul {
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            在这里学习中
            <ul>
                <li>
                    为了学习
                    <ul>
                        <li>
                            努力学习
                            <ul>
                                <li>
                                    不要放弃
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>

px

边框类不需要根据自适元素，要用绝对值px,如：border: 1px solid red

视口：vh和vw

vh单位是视口高度的1/100
vw单位是视口宽度的1/100
vmin选择视口宽高较小的值进行适配
vmax选择视口宽高较大的值进行适配

案例

    <style>
        /* vh单位是视口高度的1/100
        vw单位是视口宽度的1/100 */
        .box {
            width: 60vw;
            height: 30vh;
            background-color: teal;
            margin: auto;
            margin-bottom;:1em
        }
        .box1 {
            width: 60vw;
            height: 40vh;
            background-color: tomato;
            margin: auto;
            margin-top: 1em;            
        }
        /* 设置一个正方形的容器,确保在横屏和竖屏都能完美的显示成一个正方形.`vmin`选择视口宽高较小的值进行适配,- `vmax`选择视口宽高较大的值进行适配 */
        .box2 {
            width: 60vmax;
            height: 60vmax;
            background-color:violet;
            margin: auto; 
            margin-top: 1em;
            }
    </style>
</head>
<body>
    <div class="box">第一个布局</div>
    <div class="box1">第二个布局</div>
    <div class="box2">第三个布局</div>
</body>

图样

响应式布局em和#### em的定义

rem的定义

px

视口：vh和vw

相关文章