响应式布局
媒体查询@media query（响应式布局）
作用：针对不同的屏幕尺寸设置不同的样式
注意：
1.screen 还有 and必须带上不能省略
2.我们数字后面必须跟单位px
顺序：
媒体查询一般按照从小到大或者从大到小的顺序
值：
all ：用于所有设备
print:用于打印机和打印预览
scree：用于电脑屏幕，平板电脑，智能手机（用最多）
语法：
媒体查询-媒体类型-并且-最大（小）宽度
@media screen and (max-wifth:800px){}
这句话的意思就是：在我们屏幕上并且 最大宽度是800px 设置我们想要的样式(max-width 小于等于800)
关键字：
and：可以将多个媒体类型特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：制定某个特定的媒体类型，可以省略。
width：定义设备中页面可见区域宽度
min-wifth：定义设备中可见区域最小宽度
max‘-width：定义设备中可见区域最大宽度
小到大 大到小（利用css层叠性）
引入资源（理解）
bottstrap
用法：
固定用法
1.先外层写一个 类 名字是固定的 container
2.里面写一个类 row 固定
3.根据需求（在什么样的屏幕下 一行 显示几个元素）
bootstrap 默认将一行 划分成12分 12列 1
列就占一份
col-lg-2
