📅 最后修改于: 2023-12-03 15:25:01.738000 🧑 作者: Mango
媒体查询是CSS3引入的一种技术，它允许根据设备的特征来设置样式。这一特性是响应式Web设计的基础，旨在确保网站能够在不同设备上提供良好的用户体验。媒体查询可以检测页面的宽度、高度、分辨率、方向等。
下面是一个简单的媒体查询示例，它将样式应用到屏幕高度小于640像素的设备上：
@media screen and (max-height: 640px) {
/* 在这里定义样式 */
}
在上面的示例中，@media表明这是一个媒体查询，screen表明这是针对屏幕的查询，max-height指定了最大高度，样式将应用于高度小于或等于640像素的设备。
媒体查询通常是在CSS文件中使用的。在HTML文件中通过<link>标签引入CSS文件后，CSS文件中可使用@media关键字来指定应用样式的条件。
一般情况下，媒体查询是根据不同的设备大小来确保其正常运行。例如，下面的代码片段检测设备宽度，根据宽度调整导航栏的样式：
@media only screen and (max-width: 600px) {
/* 在这里定义样式 */
}
对于视觉和布局的排版，必须手动编写不同的CSS规则，使不同的设备能够自动适应。在现代的Web开发中，大多数CSS框架，如Bootstrap和Foundation，都提供了响应式设计的工具，以帮助您快速构建优秀的响应式网站。
除了CSS之外，JavaScript也可以与媒体查询一起使用。在JavaScript中使用window.matchMedia()函数来检测哪些媒体查询与当前设备匹配。并通过MediaQuery对象返回查询结果。
下面是一个简单的JavaScript代码片段，它检测设备屏幕的宽度，根据结果更新元素的样式：
var mediaQuery = window.matchMedia("(max-width: 600px)");
function handleDeviceChange(e) {
if (e.matches) {
/* 根据设备是否匹配进行处理 */
}
}
mediaQuery.addListener(handleDeviceChange); // 添加监听器
handleDeviceChange(mediaQuery); // 首次调用处理函数
在上面的代码片段中，window.matchMedia()函数接收一个媒体查询字符串作为参数，返回一个MediaQuery对象。MediaQuery对象包含一个matches属性，它是一个布尔值，指示设备是否符合媒体查询条件。
如果设备符合媒体查询条件，handleDeviceChange()函数将会执行一些操作，例如在<body>元素中添加一个类，以在CSS中使用相应的CSS规则。
在上面的示例中，mediaQuery.addListener()将handleDeviceChange()注册为更改设备状态的监听器。
媒体查询是一种检测设备特征并应用相应样式的技术，它是响应式Web设计的关键之一。在CSS中可以使用媒体查询来应用不同的样式，而JavaScript中可以使用window.matchMedia()函数与媒体查询一起使用。媒体查询可以检测页面的宽度、高度、分辨率、方向等。