媒体查询：根据设备或屏幕尺寸使用 CSS 媒体查询来应用不同的样式。(媒体查询器)

媒体查询允许您根据设备或屏幕尺寸应用不同的 CSS 样式。这在创建自适应和响应式的 Web 设计中非常有用。

如何使用媒体查询

媒体查询以

@media

开头，后跟一系列查询条件。查询条件可以是屏幕宽度、高度、方向或其他设备特性。

例如，以下媒体查询针对屏幕宽度小于或等于 768px 的设备应用样式：


@media (max-width: 768px) {/ 这里放要应用的样式 /}


您可以组合多种查询条件来创建更复杂和有针对性的规则。例如，以下媒体查询针对屏幕宽度介于 768px 到 1024px 之间的设备应用样式：


@media (min-width: 768px) and (max-width: 1024px) {/ 这里放要应用的样式 /}


媒体查询的好处

创建自适应网站：媒体查询允许您创建根据不同设备或屏幕尺寸自动调整大小和布局的网站。针对特定设备优化用户体验：您可以针对特定设备定制样式，例如智能手机、平板电脑或台式机。提高网站的可访问性：媒体查询可用于确保网站在所有设备和屏幕尺寸上都易于访问。减少加载时间：通过仅加载与用户设备或屏幕尺寸相关的样式，您可以减少页面加载时间。

支持的设备和特性

媒体查询在大多数现代 Web 浏览器中都得到支持，包括：ChromeFirefoxSafariEdgeOpera支持的设备特性包括：屏幕宽度和高度屏幕方向设备类型（例如智能手机、平板电脑或台式机）颜色深度打印媒体类型

示例

以下示例展示了如何使用媒体查询为不同设备调整字体大小：

/ 默认字体大小，适用于所有设备和屏幕尺寸 /body {font-size: 16px;}/ 当屏幕宽度小于或等于 768px 时，缩小字体大小 /@media (max-width: 768px) {body {font-size: 14px;}}/ 当屏幕宽度介于 768px 到 1024px 之间时，使用较大的字体大小 /@media (min-width: 768px) and (max-width: 1024px) {body {font-size: 18px;}}/ 当屏幕宽度大于或等于 1024px 时，使用最大的字体大小 /
@media (min-width: 1024px) {body {font-size: 20px;}}


结论

CSS 媒体查询是一种强大的工具，用于创建自适应和响应式的 Web 设计。通过了解如何使用媒体查询，您可以确保您的网站在所有设备和屏幕尺寸上都提供最佳的体验。