本文介绍了响应式开发原理，重点讲解了Bootstrap前端框架的使用，包括Bootstrap的简介、布局容器和栅格系统。通过实例展示了如何利用Bootstrap创建响应式导航和布局，为移动端前端开发提供参考。
学习视频及笔记参考来源：
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
一、响应式开发
1、响应式开发原理
原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区间 | 响应式尺寸 |
| 超小屏幕（手机） | < 768px | 100% |
| 小屏设备（平板） | >= 768px ~ <992px | 750px |
| 中等屏幕（桌面显示器） | >= 992px ~ <1200px | 970px |
| 宽屏设备（大桌面显示器） | >= 1200px | 1170px |
2、响应式布局容器
- 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
- 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
3、案例：响应式导航
3.1 实现效果
最低0.47元/天 解锁文章
扫一扫
1227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
