深入理解媒体查询：构建响应式网页的关键技术_网页媒体查询是什么意思啊-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_85247432/article/details/146050413

在当今多设备访问的互联网环境下，确保网页在各种屏幕上都能完美呈现，是前端开发者的重要任务。媒体查询（Media Queries）作为 CSS3 引入的强大技术，为实现这一目标提供了核心支持。它允许开发者根据设备的特性，如屏幕宽度、高度、分辨率以及设备方向等，精准地应用不同的 CSS 样式，从而打造出流畅、美观且适配所有设备的响应式网页。

一、媒体查询基础：语法解析

媒体查询的语法结构简洁而灵活，其基本形式如下：

@media mediatype and (mediafeature) {
  CSS-Code;
}

媒体类型（mediatype）：定义查询适用的设备类型。默认值为all，表示适用于所有媒体设备。常见的媒体类型包括：
- print：用于打印机设备，方便开发者为打印场景定制样式，如隐藏不必要的元素，调整字体和排版以适配纸张。
- screen：涵盖计算机屏幕、平板电脑、智能手机等各类屏幕设备，是网页开发中最常用的媒体类型，用于适配不同屏幕尺寸和特性。
- speech：针对屏幕阅读器等语音设备，通过特定样式设置优化内容的语音呈现，提升无障碍访问体验。
媒体特性（mediafeature）：描述设备的具体属性，如width（宽度）、height（高度）、orientation（设备方向，包括portrait竖屏和landscape横屏）等。这些特性可用于精确匹配设备条件，实现针对性的样式调整。
逻辑连接词（and）：用于组合媒体类型和媒体特性，或者连接多个媒体特性，使查询条件更加丰富和灵活。例如，@media screen and (min-width: 600px) and (max-width: 1200px)表示当设备为屏幕类型且屏幕宽度在 600 像素到 1200 像素之间时，应用相应的 CSS 样式。

二、媒体查询应用：多样场景下的基本使用

单一媒体特性查询：当只需根据一个媒体特性来改变样式时，可采用简单的单一特性查询。例如，@media screen and (min-width: 600px)表示当屏幕宽度为 600 像素或更大时，应用后续的 CSS 样式，这在调整页面布局以适应大屏幕设备时非常有用。
多特性组合查询：在复杂的响应式设计中，往往需要结合多个媒体特性来精准控制样式。例如，@media screen and (min-width: 600px) and (max-width: 1200px)定义了屏幕宽度在 600 像素到 1200 像素之间的设备应采用的样式，常用于针对平板电脑或中等尺寸显示器的特定布局设置。
多条件并集查询：有时需要为不同范围的设备设置相同的样式，此时可以使用逗号分隔多个媒体查询条件。如@media screen and (min-width: 600px) and (max-width: 1200px),(max-width: 599px)，表示屏幕宽度在 600 像素到 1200 像素之间以及 599 像素或更小的设备，都将应用相同的样式规则，实现对不同尺寸设备的统一管理。

三、媒体查询实战：示例展示

为了更直观地理解媒体查询的实际应用，以下通过一个完整的 HTML 和 CSS 示例来展示如何根据不同屏幕宽度创建响应式布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询示例</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        /* 容器样式 */
       .container {
            padding: 30px;
            background-color: rgb(242, 247, 249);
            box-sizing: border-box;
            height: 100%;
        }
       .top {
            width: 100%;
            background-color: rgb(63, 63, 63);
            margin-bottom: 20px;
        }
       .middle {
            width: 100%;
            height: 750px;
            margin-bottom: 20px;
            overflow: auto;
        }
       .left-box {
            width: 100%;
            background-color: rgb(255, 228, 229);
            border: 3px solid rgb(219, 0, 0);
            box-sizing: border-box;
        }
       .right {
            background-color: rgb(255, 228, 229);
            border: 3px solid rgb(219, 0, 0);
            box-sizing: border-box;
        }
       .bottom {
            width: 100%;
            background-color: rgb(156, 0, 0);
        }
        /* 大屏幕（宽度大于768px）样式 */
        @media screen and (min-width: 769px) and (max-width: 1024px), (min-width: 1025px) {
           .top {
                height: 100px;
            }
           .middle {
                height: 750px;
                overflow: auto;
            }
           .left {
                width: 30%;
                height: 100%;
                float: left;
            }
           .left-box {
                height: 100px;
                margin-bottom: 20px;
            }
           .right {
                width: 30%;
                height: 100%;
                float: right;
            }
           .bottom {
                height: 100px;
                clear: both;
            }
        }
        /* 小屏幕（宽度小于等于768px）样式 */
        @media screen and (max-width: 768px) and (min-width: 320px) {
           .container {
                padding: 20px;
            }
           .top {
                height: 10%;
            }
           .middle {
                height: auto;
            }
           .left {
                width: 100%;
                float: none;
            }
           .left-box {
                height: 50px;
                margin-bottom: 10px;
            }
           .right {
                width: 100%;
                height: 250px;
                float: none;
                margin-bottom: 10px;
            }
           .bottom {
                height: 10%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="middle">
            <div class="left">
                <div class="left-box"></div>
                <div class="left-box"></div>
                <div class="left-box"></div>
            </div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
    </div>
</body>
</html>

在这个示例中，通过两组媒体查询分别定义了大屏幕（宽度大于 768px）和小屏幕（宽度小于等于 768px）的样式。在大屏幕下，页面采用多栏布局，元素的尺寸和排列适合较大的屏幕空间；而在小屏幕上，布局简化为单列，元素尺寸和间距也进行了相应调整，以适应小屏幕的显示需求，充分展示了媒体查询在创建响应式网页布局中的强大功能。

媒体查询作为前端开发中实现响应式设计的核心技术之一，为开发者提供了精确控制网页样式的能力，使其能够根据不同设备特性打造出一致且优质的用户体验。通过灵活运用媒体查询的语法和特性，开发者可以轻松应对各种复杂的设备环境，构建出在任何屏幕上都能完美呈现的卓越网页。

参考链接：https://www.w3school.com.cn/css/css3_mediaqueries.asp