当前位置：首页 > news >正文

CSS3（媒体查询、媒体类型、媒体特性、媒体运算符、BFC）

news 来源：原创 2025/5/17 21:44:10

文章目录

1. 媒体查询
- 1.1 媒体类型
- - 1.1.1 all
  - 1.1.2 print
  - 1.1.3 screen
- 1.2 媒体特性
- 1.3 媒体运算符
- - 1.3.1 and 运算符
  - 1.3.2 ,（逗号）运算符或or运算符
  - 1.3.3 not 运算符
  - 1.3.4 only 运算符
2. 媒体查询的常用阈值
3. BFC
- 3.1 什么是BFC
- 3.2 如何创建BFC
- 3.3 BFC的特性
- 3.4 BFC的应用

视频教程： 197_CSS3_响应式布局_媒体查询

1. 媒体查询

响应式布局是现代网页设计中的一个重要概念，它允许网页根据不同设备和屏幕尺寸自动调整其布局和样式。媒体查询（Media Queries）是实现响应式设计的关键技术之一

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：小屏幕设备，如竖直方向的平板
中等屏幕（平板）
- ≥ 768px：中等屏幕设备，如横屏方向的平板
大屏幕（桌面显示器）
- ≥ 992px：大屏幕设备，如标准桌面显示器
超大屏幕（大桌面显示器）
- ≥ 1200px：超大屏幕设备，如大桌面显示器

以下是一个基于这些阈值的简单媒体查询示例：

/* 超小屏幕手机 (< 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) {
  /* 样式 */
}

这些阈值通常与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-block
- table-cell
- table-caption
- flex
- inline-flex
- grid
- inline-grid
多列容器（column-count）
display: flow-root; 的元素