媒体查询是什么？

媒体查询（Media Query）是一种 CSS3 语法，用于根据设备的特性（如屏幕尺寸、分辨率或方向）应用不同的样式规则，从而实现响应式布局。具体来说，它通过@media规则定义条件查询，检测设备特性并应用相应 CSS，以确保网站在不同屏幕设备上（如手机、平板、PC）提供优化显示效果。以下是媒体查询的核心内容：

1. 定义与组成
   • 媒体类型（Media Type）：指定应用场景的设备类型，常见类型包括all（所有设备）、print（打印预览）、screen（电脑、平板和手机屏幕）、speech（语音合成设备）。
   • 媒体特性（Media Feature）：基于设备参数编写查询条件，如width（宽度）、height（高度）、orientation（屏幕方向，可接受portrait竖屏或landscape横屏）、resolution（分辨率）等。这些特性通过逻辑操作符（and、not、only）组合成查询表达式。
2. 基本语法与写法
   媒体查询语法规则如下：

   @media [media-type] and (media-feature) {
     /* CSS样式规则 */
   }
   

   示例代码：

   • 根据屏幕宽度适配样式（当宽度小于等于600px时应用）:

     @media screen and (max-width: 600px) {
       body {
         background-color: lightblue;
         font-size: 14px;
       }
     }
     

   • 基于设备方向调整（横向屏幕）:

     @media screen and (orientation: landscape) {
       .container {
         display: flex;
         flex-direction: row;
       }
     }
     

3. 响应式设计中的应用
   • 通过检测设备特性（如宽度区间），可动态调整页面布局（例如在小屏幕上收起侧边栏）、字体大小或图片尺寸。
   • 媒体查询能与 HTML 元素配合使用（通过<link>标签加载不同样式表）:

     <link rel="stylesheet" href="small.css" media="screen and (max-width: 768px)">
     <link rel="stylesheet" href="large.css" media="screen and (min-width: 769px)">