目录

一、媒体查询

1.max-min-width

2.书写顺序

 3.媒体类型

4.媒体查询——link写法

5.媒体查询——隐藏

二、BootStrap

1.BootStrap简介

 2.BootStrap下载

 3.BootStrap使用

4.BootStrap栅格系统

 5.BootStrap栅格系统——类

 6.bootstrap——全局CSS样式

 7.bootstrap——组件

 8.bootstrap——JavaScript插件实现常见的交互效果

一、媒体查询

1.max-min-width

/* 视口宽度小于等于768px， 网页背景色是粉色 */@media (max-width: 768px) {body {background-color: pink;}}/* 视口宽度大于等于1200px， 网页背景色是skyblue */@media (min-width: 1200px) {body {background-color: skyblue;}}

2.书写顺序

CSS具有层叠性，例如：min-width先写width小的，之后写width大的（层叠性覆盖）

 3.媒体类型

 以下媒体类型知道了解即可，意义不大

 注：高度一般不判断（min/max）屏幕；

完整写法纯了解

4.媒体查询——link写法

 注：media中可以只写小括号（媒体特性），其他可省略

如：

5.媒体查询——隐藏

* {margin: 0;padding: 0;}.box {display: flex;width: 100%;}.left {width: 300px;min-height: 500px;background-color: pink;}.main {flex: 1;min-height: 500px;background-color: skyblue;}/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */@media (max-width: 768px) {.left {display: none;}}

二、BootStrap

1.BootStrap简介

 2.BootStrap下载

 3.BootStrap使用

 注：引入——要么是bootstrap.css要么是 bootstrap.min.css（这两个源代码相同，只不过.min.css是格式化压缩好的，功能差不多。如果做项目可以选择Min，因为格式化了体积小）

4.BootStrap栅格系统

响应式网页布局就要使用栅格系统，栅格系统是将网页等分成12份

 以下图中，响应断点（视口屏幕）数字要牢记，类前缀（类名）要记住

 5.BootStrap栅格系统——类

 例：

    
1
2
3

 6.bootstrap——全局CSS样式

全局CSS样式：控制某个单独标签的样式

组件：网页常见区域代码，如下拉菜单、导航图等

JavaScript插件：交互效果

定制：不满足需求的时候，修改框架的内容

 7.bootstrap——组件

 直接复制粘贴即可

 8.bootstrap——JavaScript插件实现常见的交互效果

注意有顺序要求，先引入jQuery.js,再引入bootstrap.min.js

 注：Carousel是轮播图代码