响应式开发

响应式开发原理

使用 媒体查询 针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备。

响应式布局容器

响应式需要一个父级作为布局容器（一般类名为 container），来配合子元素来实现变化效果。

原理：在不同屏幕下，使用 媒体查询 来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下看到不同页面布局和样式变化的效果。

设备划分

设备划分	尺寸区间	常用的尺寸划分（设置宽度）
超小屏幕（手机）	< 768px	100%
小屏设备（平板）	768px ~ 992px	750px
中等屏幕（桌面显示器）	992px ~ 1200px	970px
宽屏设备（大桌面显示器）	>= 1200px	1170px

代码举例

这是最常用的划分，也可以根据具体的情况进行调整：

/* 超小屏幕下（手机） */
@media screen and (max-width: 767px) {
     
    .container {
     
        width: 100%;
    }
}

/* 小屏幕下（平板） */
@media screen and (min-width: 768px) {
     
    .container {
     
        width: 750px;
    }
}

/* 中等屏幕（桌面显示器） */
@media screen and (min-width: 992px) {
     
    .container {
     
        width: 970px;
    }
}

/* 宽屏设备（大桌面显示器） */
@media screen and (min-width: 1200px) {
     
    .container {
     
        width: 1170px;
    }
}