WEBSTORM前端 —— 第3章：移动 Web —— 第5节：响应式网页
目录
一、媒体查询
1.媒体查询
2.媒体查询 – 书写顺序
3.案例 – 左侧隐藏
4.媒体查询 – 完整写法（了解）
5.媒体查询 – 外部CSS
二、Bootstrap
1.Bootstrap – 简介
2.Bootstrap – 栅格系统
3.Bootstrap – 全局样式
4.Bootstrap – 组件（Components）
5.Bootstrap – 字体图标
三、综合案例
一、媒体查询
1.媒体查询
媒体特性
- max-width：最大宽度
- min-width：最小宽度
2.媒体查询 – 书写顺序
①需求：
- 默认网页背景色是灰色
- 屏幕宽度大于等于 768px, 网页背景色是粉色
- 屏幕宽度大于等于 992px, 网页背景色是绿色
- 屏幕宽度大于等于 1200px, 网页背景色是skyblue
②提示
- u min-width（从小到大）
- u max-width（从大到小）
3.案例 – 左侧隐藏
4.媒体查询 – 完整写法（了解）
①关键词 / 逻辑操作符
- and
- only
- not
②媒体类型是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备
③媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。
5.媒体查询 – 外部CSS
二、Bootstrap
1.Bootstrap – 简介
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: https://www.bootcss.com/
2.Bootstrap – 栅格系统
3.Bootstrap – 全局样式
4.Bootstrap – 组件（Components）
5.Bootstrap – 字体图标
①下载： 导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip
②使用：
- 复制 fonts 文件夹到项目目录
- 网页引入 bootstrap-icons.css 文件
- 调用 CSS 类名（图标对应的类名）
三、综合案例
