前端 响应式设计之媒体查询

        媒体查询（Media Queries）是用于在网页设计中根据用户设备的特征（如屏幕宽度、高度、设备类型等）来应用不同的样式表规则的技术。它允许开发者根据用户设备的特性动态调整网页的布局和样式，以提供更好的用户体验。

媒体查询组成

1. 媒体类型 —— Media types
2. 媒体特性 —— Media features
3. 逻辑运算符 —— Logical operators

mediatype（媒体类型）：指定CSS样式应用的设备或媒体类型。常见的媒体类型包括：

• all：所有设备
• print：打印预览模式
• screen：屏幕设备
• speech：语音合成器

media feature（媒体特性）：指定CSS样式根据设备或环境的不同特性而应用或不应用。媒体特性必须用小括号括起来，并且包含一个或多个表达式，例如设备的宽度或高度。常见的媒体特性包括：

• width：视口或设备的宽度
• height：视口或设备的高度
• orientation：设备方向（横向或纵向）
• aspect-ratio：视口或设备的宽高比
• device-width and device-height：这两个特性用于描述设备的物理尺寸
• resolution：描述设备的分辨率

logical operators（逻辑运算符）：使用的逻辑操作符包括 and、not 和 only，它们允许开发者根据多个条件来定义 CSS 样式的应用规则。

• and 操作符：用于组合多个媒体特性，要求同时满足所有条件时才应用样式
• not 操作符：用于指定一个不满足某个媒体特性时应用样式
• only 操作符：用于避免老旧浏览器不支持媒体查询时的问题

媒体查询使用

1. 在 <link> 标签中引用不同的样式表： 在 HTML 中使用 <link> 标签的 media 属性来加载不同的 CSS 样式表，以响应不同的设备或条件。例如：

   <!-- 默认样式表 -->
   <link rel="stylesheet" href="styles.css">
   
   <!-- 当视口宽度小于等于 600px 时应用的样式表 -->
   <link rel="stylesheet" media="screen and (max-width: 600px)" href="styles-mobile.css">
   
   <!-- 当视口宽度大于 600px 时应用的样式表 -->
   <link rel="stylesheet" media="screen and (min-width: 601px)" href="styles-desktop.css">
   

2. 在 CSS中使用媒体查询： 在单个 HTML 文件内部使用 <style> 标签时/在外部的 CSS 文件中/使用像 Sass、Less 等 CSS 预处理器时，通过媒体查询条件来定义不同的 CSS 规则。例如：

   <style>
       @media screen and (max-width: 600px) {
           /* CSS rules for mobile devices */
           body {
               font-size: 14px;
           }
       }
   
       @media screen and (min-width: 601px) {
           /* CSS rules for desktop devices */
           body {
               font-size: 16px;
           }
       }
   </style>
   

具体示例

        基本语法：

@media 媒体类型 and (媒体特性) {
    /* CSS规则 */
}

       根据屏幕宽度调整样式：

/* 当屏幕宽度小于或等于 600px 时应用这些样式 */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

      针对打印设备的样式：

/* 在打印设备上隐藏某些元素 */
@media print {
    .hide-on-print {
        display: none;
    }
}

       多重条件的组合：

/* 当屏幕宽度在 600px 到 900px 之间，且设备支持颜色显示时应用这些样式 */
@media screen and (min-width: 600px) and (max-width: 900px) and (min-color: 256) {
    body {
        background-color: lightblue;
    }
}

    and 操作符

@media (条件1) and (条件2) {
    /* CSS rules */
}

@media (max-width: 600px) and (orientation: landscape) {
    /* CSS rules */
}

    not 操作符

@media not (条件) {
    /* CSS rules */
}

@media not screen {
    /* CSS rules */
}

    only 操作符

@media only (条件) {
    /* CSS rules */
}

@media only screen and (max-width: 600px) {
    /* CSS rules */
}

注意事项

• 语法与结构：媒体查询必须以 @media 开头，后面跟着一个条件，如 screen、print 等，以及一个或多个媒体特性（如宽度、高度、颜色能力等）。

• 顺序：CSS 中的媒体查询按照书写顺序进行匹配，因此通常建议从最宽泛的条件开始，逐步向下细化，确保样式按照预期生效。

• 响应式设计：媒体查询是实现响应式设计（Responsive Web Design）的关键工具，能够帮助网页在各种设备上提供良好的视觉和功能体验。

• 兼容性：大多数现代浏览器和设备都支持媒体查询，但在使用时仍需考虑到部分旧版浏览器的兼容性问题，可能需要提供备用样式或 JavaScript 解决方案。