1 视口 viewport
1.1 视口
视口是浏览器显示网页的可视区域，是网页的初始包含块，是根元素的包含块。
1.2 PC端视口和移动端视口
PC端视口：大小可调整（通过调整浏览器窗口大小或调试工具）
移动端视口：大小不可调整
1.3 完美视口
完美视口：浏览器视口宽度=设备屏幕宽度
PC端视口：本就是完美视口，无需设置
移动端视口：由于历史原因，默认不是完美视口。不论屏幕多宽，视口宽度一般为980px。可以设置meta元信息将移动端视口调整为完美视口。
<meta name="viewport" content="width=device-width" initial-scale=1.0>
2 媒体查询
### 2.1 媒体类型
- all：所有设备
- screen：电脑、平板、手机屏幕
- print：打印机
- speech：屏幕阅读器等发声设备
/*为打印机类型的媒体设备设置专门的样式*/
@media print {
body {
background-color: green;
}
h1 {
font-size: 200px;
background-color: red;
}
}
2.2 媒体特性
可用媒体特性来区分媒体类型，常用以下特性区分：
-
width：视口宽度、max-width：最大视口宽度（表示小于等于某个值）、min-width：最小视口宽度（表示大于等于某个值） -
device-width：设备屏幕宽度、max-device-width：最大屏幕宽度、min-device-width：最小屏幕宽度
注：设置了完美视口的移动端，
width和device-width最终结果无区别。
/* 设备屏幕宽度是 500px 时的样式 */
@media (device-width: 500px) {
body {
background-color: purple;
}
h1 {
color: blue;
}
}
/* 视口宽度最小是900px(视口宽度>=900px)时的样式 */
@media (min-width: 900px) {
body {
background-color: pink;
}
h1 {
color: cyan;
}
}
/* 视口宽度最大是370px(视口宽度<=370px)时的样式 */
@media (max-width: 370px) {
body {
background-color: #369;
}
h1 {
background: #f90;
}
}
2.3 运算符
借助运算符，可以组合媒体类型和媒体特性，设置更复杂的媒体查询条件。
-
and：并且 -
，：或者 -
not：非 -
only：仅仅
注：
not和only只能用于媒体类型
/* 视口宽度>=800 并且 <= 1000 时的样式 */
@media (min-width: 800px) and (max-width: 1000px) {
body {
background-color: pink;
color: cyan;
}
}
/* 视口宽度<=400 或者 视口宽度 >= 1100 时的样式 */
@media (max-width: 400px), (min-width: 1100px) {
body {
background-color: #f90;
color: #369;
}
}
/* 设置 除了打印机 之外的媒体类型的样式样式 */
@media not print {
}
/* only 用法，only先生效，and后生效 */
@media only screen and (min-width: 768px){
}
2.4 媒体查询在CSS3中的使用（2种方式）
媒体查询不能提高样式的优先级，为了能够生效，建议将其写在其他样式的后面。
① 媒体查询与其他CSS代码写在同一个文件中
@media 媒体查询条件{
选择器1{
样式...
}
选择器2{
样式...
}
...
}
② 媒体查询的CSS文件配合 link 标签使用
<link rel="stylesheet" media="媒体查询条件1" href="对应的CSS文件1地址">
<link rel="stylesheet" media="媒体查询条件2" href="对应的CSS文件2地址">
3 响应式布局
3.1 阈值（断点）
常用设置：
- 两个断点：640px 1024px
- 三个断点：768px 992px 1200px
- 四个断点：576px 768px 992px 1200px
3.2 移动优先布局方案（媒体查询的设置）
媒体查询外设置的普通样式是小屏幕的样式，媒体查询使用min-width，从小到大，依靠样式覆盖的特点，实现不同视口宽度的设备对应的样式设置，这样简化了媒体查询条件。
注：前面设置的样式仍会生效，后面的媒体查询中设置了相同的样式才会覆盖前面的样式。
.container {
margin: 0 auto;
width: 100%;
height: 200px;
background-color: pink;
}
/* 小屏幕 */
@media (min-width: 768px) {
.container {
width: 750px;/*覆盖前面的100%*/
background-color: #f90;/*覆盖前面的pink*/
}
}
/* 中等屏幕 */
@media (min-width: 992px) {
.container {
width: 970px;/*覆盖前面的750px*/
background-color: cyan;/*覆盖前面的#90*/
}
}
/* 大屏幕 */
@media (min-width: 1200px) {
.container {
width: 1170px;/*覆盖前面的970px*/
background-color: green;/*覆盖前面的cyan*/
}
}
4 BFC
4.1 什么是BFC
BFC：Block Formatting Context，块级格式上下文。当元素满足某些条件时，我们认为该元素创建了BFC。创建了BCF的元素可以看作一个独立的容器，其内部的元素无论如何布局都不会影响到外面的元素。
4.2 创建BFC的方式
- 根元素
- 绝对定位元素、固定定位元素
- 浮动元素
- 行内块元素
- 表格元素：td、th、tr、tbody、thead、tfoot、caption、table
- 设置
overflow属性且值不为visible的元素 - 伸缩项目（注意：不是伸缩容器！）
- 多列容器（设置了
column-count或者column-width的元素） - 设置了CSS属性
column-span:all;的元素（即使不是多列容器的子元素设置该属性也能开启BFC）
4.3 创建BFC可以解决的问题
- 解决子元素浮动的影响，如：父元素高度塌陷
- 解决子元素的 margin 塌陷（第一个子元素的上外边距和最后一个子元素的下外边距会塌陷到它们的父元素上）
