大白话 CSS 中@media查询的工作原理，如何利用它实现不同设备的样式适配
什么是 @media 查询
在网页设计里，不同的设备（像手机、平板、电脑）屏幕尺寸各异。要是只使用一套固定的样式，网页在某些设备上可能就显示得乱七八糟。@media 查询就像是一个"智能开关"，能依据设备的特性（比如屏幕宽度、高度、分辨率等）来应用不同的 CSS 样式，从而让网页在各种设备上都能完美显示。
@media 查询的工作原理
@media 查询的核心在于设定一个或多个条件，当设备的特性满足这些条件时，就会应用查询里定义的 CSS 样式。基本的语法如下：
css
/* 定义一个媒体查询 */
@media 媒体类型 and (媒体特性) {
/* 当条件满足时应用的样式 */
选择器 {
属性: 值;
}
}- 媒体类型 ：用来指定查询适用的设备类型，常见的有
all（所有设备）、screen（屏幕设备，如电脑、手机、平板）、print（打印设备）等。 - 媒体特性 ：这是查询的关键条件，例如
min-width（最小宽度）、max-width（最大宽度）、orientation（设备方向，如portrait竖屏、landscape横屏）等。
如何利用 @media 查询实现不同设备的样式适配
下面通过一个具体的例子来说明如何使用 @media 查询为不同屏幕宽度的设备应用不同的样式。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Example</title>
<style>
/* 全局样式，适用于所有设备 */
body {
font-family: Arial, sans-serif;
background-color: lightblue;
color: black;
}
/* 当屏幕宽度小于等于 600px 时（通常是手机设备），应用以下样式 */
@media screen and (max-width: 600px) {
body {
background-color: lightgreen; /* 将背景颜色改为浅绿色 */
font-size: 14px; /* 减小字体大小 */
}
}
/* 当屏幕宽度大于 600px 且小于等于 900px 时（通常是平板设备），应用以下样式 */
@media screen and (min-width: 601px) and (max-width: 900px) {
body {
background-color: lightyellow; /* 将背景颜色改为浅黄色 */
font-size: 16px; /* 调整字体大小 */
}
}
/* 当屏幕宽度大于 900px 时（通常是电脑设备），应用以下样式 */
@media screen and (min-width: 901px) {
body {
background-color: lightcoral; /* 将背景颜色改为浅珊瑚色 */
font-size: 18px; /* 增大字体大小 */
}
}
</style>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这个网页使用了媒体查询来适配不同的设备。</p>
</body>
</html>代码解释
- 全局样式：
css
/* 全局样式，适用于所有设备 */
body {
font-family: Arial, sans-serif;
background-color: lightblue;
color: black;
}这部分样式是全局的，会应用到所有设备上。
- 手机设备样式（屏幕宽度小于等于 600px）：
css
/* 当屏幕宽度小于等于 600px 时（通常是手机设备），应用以下样式 */
@media screen and (max-width: 600px) {
body {
background-color: lightgreen; /* 将背景颜色改为浅绿色 */
font-size: 14px; /* 减小字体大小 */
}
}当设备屏幕宽度小于等于 600px 时，会将页面的背景颜色改为浅绿色，字体大小减小到 14px。
- 平板设备样式（屏幕宽度大于 600px 且小于等于 900px）：
css
/* 当屏幕宽度大于 600px 且小于等于 900px 时（通常是平板设备），应用以下样式 */
@media screen and (min-width: 601px) and (max-width: 900px) {
body {
background-color: lightyellow; /* 将背景颜色改为浅黄色 */
font-size: 16px; /* 调整字体大小 */
}
}当设备屏幕宽度在 601px 到 900px 之间时，会将页面的背景颜色改为浅黄色，字体大小调整为 16px。
- 电脑设备样式（屏幕宽度大于 900px）：
css
/* 当屏幕宽度大于 900px 时（通常是电脑设备），应用以下样式 */
@media screen and (min-width: 901px) {
body {
background-color: lightcoral; /* 将背景颜色改为浅珊瑚色 */
font-size: 18px; /* 增大字体大小 */
}
}当设备屏幕宽度大于 900px 时，会将页面的背景颜色改为浅珊瑚色，字体大小增大到 18px。
通过这种方式，我们可以根据不同设备的屏幕宽度来动态调整网页的样式，实现不同设备的样式适配。