响应式布局的常用方案

<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>
<div id="div1">
    this is div
</div>
  • media-query,根据不同的屏幕宽度设置根元素 font-size
  • rem,基于根据元素的相对单位
  • vh 网页视口高度的 1/100,vw 网页视口宽度的 1/100,其他vmax,vmin取高度,宽度中的最大或最小
window.innerHeight === 100vh
window.innerWidth === 100vw