响应式
一、媒体查询
开发常用写法媒体特性常用写法
max-width
min-width
1 书写顺序
目标：能够根据设备宽度的变化，设置差异化样式
min-width（从小到大）
max-width（从大到小）
需求
默认网页背景色是灰色
屏幕宽度在768-992之间, 网页背景色是粉色
屏幕宽度在992-1200之间, 网页背景色是skyblue
屏幕宽度大于1200, 网页背景色是绿色
2 基本语法
根据设备宽度的变化，设置差异化样式
完整写法
3 关键词
能够根据设备宽度的变化，设置差异化样式
and
only
not
4 媒体类型
媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。
5 媒体特征
媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。
6 外链式CSS引入
eg：
7 隐藏
使用媒体查询，配合display：none；即可
二、BootStrap
1 UI框架
UI框架概念
将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
作用
基于框架开发，效率高，稳定性高。
2 BootStrap简介
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: https://www.bootcss.com/
3 BootStrap使用步骤
使用步骤
一、下载
下载： https://www.bootcss.com/首页 → BootStrap3中文文档 → 下载BootStrap
二、使用
1.引入： BootStrap提供的CSS代码
2.调用类：使用BootStrap提供的样式container：响应式布局版心类
4 BootStrap栅格系统
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认网页分成12等份
.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。
注意:
1.container类自带间距15px;
2.row类自带间距-15px
5 全局样式
掌握BootStrap手册用法，使用全局CSS样式美化标签
分类：布局样式 在标签后后加入对应样式的类名或属性值内容美化样式
