响应式排版

rem

rem 是相对于根元素 html 来计算，比如 html 的 font-size 是 16px, 那么子元素设置 1rem 就是 16px, 1.5rem 就是 24px。

基于这个原理，在响应式排版中，通过 @media 在不同的断点下修改 html 的 font-size 值，这样使用 rem 单位的元素就会有相应的变化。

html { 
    font-size: 16px; 
    @media (min-width: 800px) { 
        font-size: 24px; 
    }
    @media (min-width: 1200px) { 
        font-size: 36px; 
    } 
}

.responsive {
    /* 
        此样式的文字大小:
        1. 设备宽度 [0px,800px) 时是 8px;
        2. 设备宽度 [800px,1200px) 时是 12px;
        3. 设备宽度 [1200px, Infinity) 时是 18px;
    */
    font-size: 0.5rem;  
}