HTML/CSS 备忘录 - 15. CSS 媒体查询与其他
一、媒体查询
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
CSS 代码...;
}也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet"
media="mediatype and|not|only (expressions)"
href="print.css" />媒体类型：
- all：检测所有设备。
- screen：检测电子屏幕，包括:电脑屏幕、平板屏幕、手机屏幕等。
- print：检测打印机。
媒体特征：
- width：检测视口宽度。
- max-width：检测视口最大宽度。
- min-width：检测视口最小宽度。
- height：检测视口高度。
- max-height：检测视口最大高度。
- min-height：检测视口最小高度。
- device-width：检测设备屏幕的宽度。
- max-device-width：检测设备屏幕的最大宽度。
- min-device-width：检测设备屏幕的最小宽度。
- orientation：检测视口的旋转方向 (是否横屏)，portrait（竖屏）landscape（横屏）
运算符符：
- and：并且。
- , 或 or：或者。
- not：用于否定媒体查询。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 not 运算符，则还必须指定媒体类型。
- only：仅在整个查询匹配时才应用样式。这对于防止较老的浏览器应用所选样式很有用。当不使用 only 时，较老的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。
媒体查询示例
/* 屏幕可视窗口小于 480px 的设备上应用样式 */
@media screen and (max-width: 480px) {
/* CSS-Code */
}
/* 屏幕可视窗口小于 1200px 且 大于768px 时应用样式 */
@media screen and (min-width:768px) and (max-width:1200px) {
/* CSS-Code */
}二、BFC
块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC 可以理解为元素的一些特殊特性，在默认的情况下处于关闭状态；当元素满足了某些条件后将会开启。
开启了 BFC 能解决什么问题：
- 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
- 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
- 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
如何开启 BFC：
- 根元素。
- 浮动元素。
- 绝对定位、固定定位的元素。
- 行内块元素。
- 表格单元格：table、thead、tbody、tfoot、th、td、tr、caption。
- overflow 的值不为 visible 的块元素。
- 伸缩项目。
- 多列容器。
- column-span 为 all 的元素（即使该元素没有包裹在多列容器中）。
- display 为 flow-root 的元素。
三、默认样式
很多元素都有默认样式，而且这些默认样式，在不同的浏览器 上呈现出来的效果也不一样，所以我们需要重置这些默认样式。
重置默认样式的方案有很多，我们也可以自己构建一套自己的默认样式，但更简单的是使用现有的一些成熟方案，例如 Normalize.css 就是一款重置默认样式的方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。
官网：
https://necolas.github.io/normalize.css/
