HTML/CSS 备忘录 – 15. CSS 媒体查询与其他

大家好，欢迎来到IT知识分享网。

一、媒体查询

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 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/