媒体查询的基本语法

媒体查询的基本语法

媒体查询是CSS3引入的一种强大功能，允许根据设备特性（如视口宽度、屏幕分辨率或设备方向）应用不同的样式规则。通过@media规则实现，其核心语法结构包含媒体类型和媒体特性两个关键部分。

@media规则的结构

@media规则的基本语法格式如下：

@media mediatype and (mediafeature) {
  /* CSS规则 */
}

其中mediatype指定目标设备类型，mediafeature定义具体的条件表达式。最常见的媒体类型是screen，表示计算机屏幕。其他媒体类型包括：

• all：所有设备
• print：打印机和打印预览
• speech：屏幕阅读器等语音合成设备

媒体特性表达式

媒体特性通常需要放在括号内，并与媒体类型通过and关键字连接。常用的媒体特性包括：

• width：视口宽度
• height：视口高度
• orientation：设备方向（portrait或landscape）
• resolution：屏幕分辨率
• aspect-ratio：视口宽高比

示例代码：

@media screen and (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

逻辑运算符的使用

媒体查询支持三种逻辑运算符来构建复杂条件：

1. and：同时满足多个条件
2. ,（逗号）：相当于OR运算，满足任一条件即可
3. not：否定整个查询

示例：

/* 同时满足两个条件 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
  .container {
    width: 80%;
  }
}

/* 满足任一条件 */
@media (max-width: 600px), (min-width: 1200px) {
  .sidebar {
    display: none;
  }
}

/* 排除特定条件 */
@media not all and (monochrome) {
  .header {
    color: #333;
  }
}

常用断点设置

响应式设计中常用的断点设置示例：

/* 超小设备（手机，600px及以下） */
@media only screen and (max-width: 600px) {...}

/* 小设备（平板，600px-768px） */
@media only screen and (min-width: 600px) and (max-width: 768px) {...}

/* 中等设备（笔记本，768px-992px） */
@media only screen and (min-width: 768px) and (max-width: 992px) {...}

/* 大设备（台式机，992px-1200px） */
@media only screen and (min-width: 992px) and (max-width: 1200px) {...}

/* 超大设备（大屏台式机，1200px及以上） */
@media only screen and (min-width: 1200px) {...}

现代CSS中的媒体查询改进

CSS4草案引入了更简洁的语法和新的特性：

/* 新语法示例 */
@media (width <= 600px) {
  .element {
    font-size: 1.2rem;
  }
}

/* 范围语法 */
@media (400px <= width <= 800px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

实际应用案例

结合Flexbox的响应式布局示例：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px;
  margin: 10px;
}

@media (max-width: 800px) {
  .item {
    flex-basis: 150px;
  }
}

@media (max-width: 500px) {
  .container {
    flex-direction: column;
  }
  .item {
    flex-basis: auto;
  }
}

媒体查询与自定义属性

结合CSS变量创建动态主题：

:root {
  --primary-color: blue;
  --font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: lightblue;
    --background: #222;
  }
}

body {
  background: var(--background, white);
  color: var(--primary-color);
  font-size: var(--font-size);
}

检测设备特性

检测不同设备特性的示例：

/* 检测触摸设备 */
@media (hover: none) and (pointer: coarse) {
  .button {
    padding: 1em;
  }
}

/* 检测高对比度模式 */
@media (forced-colors: active) {
  img {
    border: 2px solid;
  }
}

/* 检测动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

媒体查询在框架中的使用

在Sass/Less等预处理器中的嵌套写法：

// Sass示例
.component {
  width: 100%;
  
  @media (min-width: 768px) {
    width: 50%;
    float: left;
  }
  
  @media (min-width: 1024px) {
    width: 33.33%;
  }
}

常见问题与解决方案

1. 媒体查询不生效的可能原因：

   • CSS优先级问题
   • 视口meta标签缺失
   • 条件表达式书写错误

2. 确保在HTML头部添加视口meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 调试媒体查询的技巧：
   • 使用浏览器开发者工具的设备模式
   • 添加临时边框检查触发状态
   • 使用JavaScript检测当前媒体查询状态

// 检测媒体查询状态
const mediaQuery = window.matchMedia('(min-width: 768px)');
console.log(mediaQuery.matches);