响应式开发

 1     .container {
 2         height: 150px;
 3         background-color: pink;
 4         margin: 0 auto;
 5     }
 6     /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
 7     @media screen and (max-width: 767px) {
 8         .container {
 9            width: 100%;
10         }
11     }
12     /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
13     @media screen and (min-width: 768px) {
14         .container {
15            width: 750px;
16         }
17     }
18     /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
19     @media screen and (min-width: 992px) {
20         .container {
21            width: 970px;
22         }
23     }
24     /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
25     @media screen and (min-width: 1200px) {
26        .container {
27            width: 1170px;
28        }
29     }