前端基礎面試之CSS響應式rem/vw/vh

<style type="text/css">
        html {
            font-size: 100px;/*根元素font-size的大小 也就是1rem的大小*/
        }
        div {
            background-color: #ccc;
            margin-top: 10px;
            font-size: 0.16rem;/*根據根元素得，1rem為100px，那0.16rem是16px*/
        }
    </style>
           

<style type="text/css">
        @media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的寬度（320px）比例設定 font-size */
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            /* iphone6/7/8 和 iphone x */
            html {
                font-size: 100px;
            }
        }
        @media only screen and (min-width: 414px) {
            /* iphone6p 或者更大的尺寸，以 iphone6p 的寬度（414px）比例設定 font-size */
            html {
                font-size: 110px;
            }
        }

        body {
            font-size: 0.16rem;
        }
        #div1 {
            width: 1rem;
            background-color: #ccc;
        }

    </style>
           

螢幕預設寬是100vw，長是100vh

#container {
            background-color: red;
            width: 10vw;
            height: 10vh;
        }