CSS3（媒体查询、媒体类型、媒体特性、媒体运算符、BFC）
CSS3（媒体查询、媒体类型、媒体特性、媒体运算符、BFC）
响应式布局是现代网页设计中的一个重要概念，它允许网页根据不同设备和屏幕尺寸自动调整其布局和样式。媒体查询（Media Queries）是实现响应式设计的关键技术之一。
1. 媒体查询
1.1 媒体类型
在响应式布局中，媒体查询（Media Queries）允许开发者根据不同的媒体类型和特性来应用CSS样式。以下是一些在媒体查询中常用的媒体类型：
1.1.1 all
适用范围：所有媒体类型
@media all and (max-width: 600px) {
/* 样式规则 */
}
1.1.2 print
适用范围：打印文档和打印预览模式
@media print {
/* 打印样式规则 */
}
1.1.3 screen
适用范围：彩色电脑屏幕、平板电脑、智能手机等
@media screen and (max-width: 768px) {
/* 屏幕小于768px时的样式规则 */
}
1.2 媒体特性
在响应式布局中，媒体查询（Media Queries）的媒体特性（Media Features）用于检测设备的各种特性，并根据这些特性应用不同的CSS样式
媒体特性 | 描述 | 示例 | 示例解释 |
|---|---|---|---|
width | 设备视口的宽度 | @media (width: 600px) { /* 样式 */ } | 当视口宽度正好是600px时应用样式 |
height | 设备视口的高度 | @media (height: 400px) { /* 样式 */ } | 当视口高度正好是400px时应用样式 |
min-width | 设备视口的最小宽度 | @media (min-width: 600px) { /* 样式 */ } | 当视口宽度至少是600px时应用样式 |
max-width | 设备视口的最大宽度 | @media (max-width: 600px) { /* 样式 */ } | 当视口宽度最多是600px时应用样式 |
min-height | 设备视口的最小高度 | @media (min-height: 400px) { /* 样式 */ } | 当视口高度至少是400px时应用样式 |
max-height | 设备视口的最大高度 | @media (max-height: 400px) { /* 样式 */ } | 当视口高度最多是400px时应用样式 |
device-width | 设备屏幕的宽度 | @media (device-width: 800px) { /* 样式 */ } | 当设备屏幕宽度正好是800px时应用样式 |
device-height | 设备屏幕的高度 | @media (device-height: 600px) { /* 样式 */ } | 当设备屏幕高度正好是600px时应用样式 |
orientation | 设备是横屏还是竖屏 | @media (orientation: landscape) { /* 样式 */ } | 当设备处于横屏模式时应用样式 |
aspect-ratio | 视口的宽高比 | @media (aspect-ratio: 16/9) { /* 样式 */ } | 当视口的宽高比是16:9时应用样式 |
resolution | 设备的分辨率 | @media (resolution: 96dpi) { /* 样式 */ } | 当设备的分辨率至少是96dpi时应用样式 |
scan | 电视扫描方式（progressive 或 interlace） | @media (scan: progressive) { /* 样式 */ } | 当电视使用逐行扫描方式时应用样式 |
grid | 设备是否使用栅格或点阵屏幕 | @media (grid) { /* 样式 */ } | 当设备使用栅格或点阵屏幕时应用样式 |
color | 设备是否有彩色显示 | @media (color) { /* 样式 */ } | 当设备有彩色显示能力时应用样式 |
color-index | 设备颜色索引表中的颜色数 | @media (color-index: 256) { /* 样式 */ } | 当设备的颜色索引表至少有256种颜色时应用样式 |
monochrome | 设备是否使用单色显示 | @media (monochrome) { /* 样式 */ } | 当设备使用单色显示时应用样式 |
prefers-reduced-motion | 用户是否请求减少动画或运动的效果 | @media (prefers-reduced-motion: reduce) { /* 样式 */ } | 当用户设置了减少动画效果的偏好时应用样式 |
prefers-color-scheme | 用户是否选择了浅色或深色主题 | @media (prefers-color-scheme: dark) { /* 样式 */ } | 当用户选择了深色主题偏好时应用样式 |
1.3 媒体运算符
1.3.1 and 运算符
and 运算符用于将多个媒体特性组合在一起，只有当所有条件都满足时，样式才会被应用
@media (min-width: 600px) and (orientation: landscape) {
/* 横屏且宽度大于等于600px的设备样式 */
}
此媒体查询应用于视口宽度大于等于600像素并且设备处于横屏模式的场景
1.3.2 ,（逗号）运算符或or运算符
,（逗号）运算符或 or 运算符用于列出多个媒体查询，如果其中任何一个查询条件满足，样式就会被应用，这相当于逻辑或
@media (min-width: 600px), (orientation: landscape) {
/* 宽度大于等于600px或横屏设备的样式 */
}
此媒体查询应用于视口宽度大于等于600像素或者设备处于横屏模式的场景，满足任一条件即可
1.3.3 not 运算符
not 运算符用于否定整个媒体查询，只有当条件不满足时，样式才会被应用
@media not print {
/* 非打印媒体的样式 */
}
此媒体查询应用于所有非打印媒体设备，例如屏幕显示
1.3.4 only 运算符
only 运算符用于指定某些样式只应用于符合查询条件的设备，而不包括那些不识别媒体查询的老旧浏览器，这个运算符主要用于兼容性
@media only screen and (min-width: 600px) {
/* 宽度大于等于600px的屏幕设备的样式 */
}
此媒体查询专门应用于宽度大于等于600像素的屏幕设备，同时避免了在不支持媒体查询的浏览器上应用这些样式
2. 媒体查询的常用阈值
响应式布局通常使用媒体查询（Media Queries）来根据不同的屏幕尺寸或设备特性应用不同的样式。以下是一些常用的屏幕尺寸阈值，它们通常用于设置断点（breakpoints）以实现响应式设计：
超小屏幕（手机）
< 576px：通常用于小屏幕手机小屏幕（平板手机）
中等屏幕（平板）
大屏幕（桌面显示器）
超大屏幕（大桌面显示器）
以下是一个基于这些阈值的简单媒体查询示例：
/* 超小屏幕手机 (< 576px) */
@media (max-width: 575.98px) {
/* 样式 */
}
/* 小屏幕平板手机 (≥ 576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
/* 样式 */
}
/* 中等屏幕平板 (≥ 768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 样式 */
}
/* 大屏幕桌面显示器 (≥ 992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
/* 样式 */
}
/* 超大屏幕大桌面显示器 (≥ 1200px) */
@media (min-width: 1200px) {
/* 样式 */
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
这些阈值通常与Bootstrap等前端框架中定义的断点相匹配，但它们可以根据具体项目的需求和设计目标进行调整。设计师和开发者可能会根据目标用户群体的设备使用情况来设定不同的断点
3. BFC
3.1 什么是BFC
BFC（Block Formatting Context，块级格式化上下文）是Web页面中块级盒子布局发生的区域，这些盒子按照一定的规则进行排布和定位。BFC是CSS布局的一部分，它对元素的定位、浮动和清除浮动等行为有着重要的影响
3.2 如何创建BFC
以下是一些可以创建BFC的情况：
- 根元素（
<html>） - 浮动元素（
float属性不为none） - 绝对定位元素（
position为absolute或fixed） overflow属性不为visible的元素（例如overflow: hidden、overflow: scroll、overflow: auto）- display值为以下之一的元素：
inline-blocktable-celltable-captionflexinline-flexgridinline-grid
- 多列容器（column-count）
display: flow-root;的元素
3.3 BFC的特性
- BFC是一个独立的布局单元，内部的元素不会影响外部元素
- BFC可以包含浮动的元素（清除浮动），防止浮动元素影响外部元素
- BFC可以阻止垂直外边距折叠。在BFC中，两个相邻的块级元素的垂直外边距不会折叠
- BFC中的浮动元素不会影响外部元素的布局
- BFC可以确保元素左边界与其包含块的左边界对齐，即使存在浮动元素也是如此
3.4 BFC的应用
- 防止浮动元素导致的高度塌陷：通过触发父元素生成BFC，可以包含浮动子元素，从而避免高度塌陷
- 避免外边距折叠：将元素放在不同的BFC中，可以避免它们之间的垂直外边距折叠
- 实现两列布局：通过浮动一列元素并触发另一列生成BFC，可以创建两列布局，其中一列自适应内容高度