响应式开发#
响应式开发原理#
就是使用 媒体查询 对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕（手机） | <768px |
| 小屏设备（平板） | [768px,992px) |
| 中等屏幕（桌面显示器） | [992px,1200px) |
| 宽屏设备（大桌面显示器） | >=1200px |
响应式布局容器#
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分
- 超小屏幕（手机，小于768px）：设置宽度为100%
- 小屏幕（平板，大于等于768px）：设置宽度为750px
- 中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
- 大屏幕（大桌面显示器，大于等于1200px）：设置宽度为1170px
响应式开发中，首先需要一个布局容器container
案例
屏幕大于等于768px，导航栏一行8项
屏幕小于768px，导航栏一行3项
- 当屏幕大于等于768px，给布局容器container设置宽度为750px
- container里面包含8个li盒子，每个盒子宽度定为93.75px（750/8），高度为30px，浮动一行显示
- 当屏幕缩放，宽度小于768px时，container盒子宽度修改为100%宽度
- 此时里面的8个li宽度修改为33.33%，这样一行就只能显示3个li，剩余的下行显示
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏