CSS回顾

 响应式布局  

媒体查询  @media 

参考： https://developer.mozila.org/zh-CN/docs/Web/CSS/@media

媒体特性

运算符

常用阈值

例如：

/* 超小屏幕 */
@media screen and (max-width:768px) {
    body {
        background-color: #111;
    }
}
/* 中等屏幕 */
@media screen and (min-width:768px) and (max-width:992px) {
    body {
        background-color: #222;
    }
}
/* 大屏幕 */
@media screen and (min-width:992px) and (max-width:1200px) {
    body {
        background-color: #333;
    }
}
/* 超大屏幕 */
@media screen and (min-width:1200px) {
    body {
        background-color: #444;
    }
}

外链式

BFC