响应式开发

1 响应式开发

1.1 响应式开发原理

响应式开发就是使用媒体查询，针对不同宽度的设备进行布局和样式的调整，从而适配不同设备。

1.2 案例

/*1. 超小屏幕下 小于768 容器宽度为100%*/
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}

/*2. 小屏幕下 >= 768, 容器布局改为750px*/
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/*2. 中等屏幕 >= 992, 容器布局改为970px*/
@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/*2. 小屏幕下 >= 1200, 容器布局改为1170px*/
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}