设备特性的媒体查询

设备特性的媒体查询

媒体查询是CSS3引入的强大功能，允许开发者根据设备特性（如视口宽度、屏幕方向、分辨率等）应用不同的样式规则。通过媒体查询，可以创建响应式设计，使网页在各种设备上都能良好呈现。

媒体查询的基本语法

媒体查询使用@media规则，后跟一个或多个媒体特性表达式。基本语法结构如下：

@media media-type and (media-feature) {
  /* CSS规则 */
}

其中media-type可以是all、screen、print等，而media-feature则定义了具体的设备特性条件。例如：

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

常用设备特性

视口宽度

最常用的媒体特性是视口宽度，可以针对不同屏幕尺寸应用样式：

/* 小屏幕设备 */
@media (max-width: 576px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

/* 中等屏幕设备 */
@media (min-width: 577px) and (max-width: 992px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

/* 大屏幕设备 */
@media (min-width: 993px) {
  .container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
  }
}

设备方向

可以根据设备是横屏还是竖屏来调整布局：

/* 竖屏模式 */
@media (orientation: portrait) {
  .header {
    height: 80px;
  }
}

/* 横屏模式 */
@media (orientation: landscape) {
  .header {
    height: 50px;
  }
}

分辨率查询

针对高分辨率设备（如Retina显示屏）可以提供更高清的图片：

@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

组合多个条件

媒体查询支持使用逻辑运算符and、,（相当于or）和not来组合多个条件：

/* 同时满足两个条件 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 样式规则 */
}

/* 满足任一条件 */
@media (max-width: 600px), (min-width: 1200px) {
  /* 样式规则 */
}

/* 不满足条件时应用 */
@media not all and (max-width: 600px) {
  /* 样式规则 */
}

现代CSS中的媒体查询特性

范围语法

CSS Media Queries Level 4引入了更简洁的范围语法：

/* 传统写法 */
@media (min-width: 400px) and (max-width: 600px) {
  /* 样式规则 */
}

/* 新范围语法 */
@media (400px <= width <= 600px) {
  /* 样式规则 */
}

交互能力检测

可以检测设备的交互能力，如是否支持悬停：

/* 主输入设备支持悬停 */
@media (hover: hover) {
  .menu-item:hover {
    background-color: #f0f0f0;
  }
}

/* 主输入设备不支持悬停 */
@media (hover: none) {
  .menu-item {
    padding: 10px;
  }
}

颜色能力检测

检测设备对颜色的支持程度：

/* 设备支持至少8位颜色 */
@media (color) {
  .theme {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
  }
}

/* 设备支持广色域 */
@media (color-gamut: p3) {
  .theme {
    background: linear-gradient(to right, color(display-p3 1 0.2 0), color(display-p3 1 0.6 0.2));
  }
}

实际应用示例

响应式导航栏

.nav {
  display: flex;
  background: #333;
}

.nav-item {
  padding: 15px;
  color: white;
  text-decoration: none;
}

/* 小屏幕时改为垂直布局 */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
  
  .nav-item {
    padding: 10px;
    border-bottom: 1px solid #555;
  }
}

自适应字体大小

html {
  font-size: 16px;
}

/* 根据视口宽度调整根字体大小 */
@media (min-width: 576px) {
  html {
    font-size: 17px;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 992px) {
  html {
    font-size: 19px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

暗色模式支持

/* 默认浅色主题 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 暗色主题偏好 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

性能优化考虑

虽然媒体查询非常有用，但过度使用可能会影响性能：

1. 将媒体查询尽可能靠近它们相关的选择器，而不是全部放在文件底部
2. 避免创建太多断点，通常3-5个主要断点足够
3. 使用min-width而不是max-width的移动优先方法可以减少代码量

/* 移动优先的写法 */
.component {
  /* 小屏幕样式 */
  padding: 10px;
}

@media (min-width: 768px) {
  .component {
    /* 中等屏幕样式 */
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .component {
    /* 大屏幕样式 */
    padding: 30px;
  }
}

媒体查询与容器查询的比较

CSS Container Queries是更新的技术，允许组件根据其容器尺寸而非视口尺寸来调整样式：

.component {
  /* 默认样式 */
}

@container (min-width: 400px) {
  .component {
    /* 容器宽度大于400px时的样式 */
  }
}

虽然容器查询更灵活，但媒体查询仍然是响应整个页面布局的最佳选择，两者可以互补使用。

浏览器兼容性

现代浏览器对媒体查询的支持已经相当完善，但某些新特性可能需要考虑兼容性：

• 范围语法（如(400px <= width <= 600px)）需要较新的浏览器版本
• 交互媒体特性（如hover、pointer）在旧浏览器中可能不被支持
• 颜色相关媒体查询在非专业设备上可能表现不一致

可以使用特性检测或渐进增强策略来确保兼容性：

/* 基础样式适用于所有设备 */
.tooltip {
  display: inline-block;
  position: relative;
}

/* 仅在有悬停能力的设备上显示工具提示 */
@media (hover: hover) {
  .tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    /* 其他样式 */
  }
}