SOURCE

<div class="woc">
    控制浏览器宽度试试看效果
</div>

/* 1.默认样式 */
.woc {
    background: red;
    height: 50px;
    text-align: center;
    font-weight: 600;
}

/* 2.窄屏幕 */
@media screen and (max-width: 768px) {
    .woc {
        background: darkgreen;
    }
}


/* 3.小屏幕 */
@media screen and (max-width: 576px) {
    .woc {
        background: blue;
    }
}



/* 从大到小， 媒体查询的顺序不能乱 */