响应式布局技巧？
大约 1 分钟
响应式原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕（手机） | < 768px |
| 小屏设备（平板） | 992px< x >=768px |
| 中等屏幕（桌面显示器） | 1200px< x >= 992px |
| 宽屏设备（大桌面显示器） | >= 1200px |
响应式布局容器
- 响应式需要一个父级作为一个布局容器，来配合子级元素实现变化效果
- 原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，通过布局容器的大小来改变里面子元素排列方式和大小，从而实现不同屏幕下，看到不同的页面和样式的变化
响应式尺寸划分
| 设备划分 | 尺寸区间 | 设置宽度 |
|---|---|---|
| 超小屏幕（手机） | < 768px | 100% |
| 小屏设备（平板） | 992px< x >=768px | 750px |
| 中等屏幕（桌面显示器） | 1200px< x >= 992px | 970px |
| 宽屏设备（大桌面显示器） | >= 1200px | 1170px |
Bootstrap
Bootstrap 简介
Bootstrap来自 Twitter(推特)，是目前最受欢迎的前端框架。Bootstap 是基于 HTML、CSS、和 JavaScript 的，它简洁灵活，使得 web 开发更加快捷
Bootstrap 优点
- 标准化 html+css 编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈、不断的更新迭代
- 让开发更简单，提高开发的效率