媒体查询高级用法

媒体查询基础回顾

媒体查询是CSS3中用于根据设备特性应用不同样式的技术。最基本的媒体查询语法如下：

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

这个例子表示当视口宽度小于等于600px时，背景色会变为浅蓝色。媒体查询由媒体类型和媒体特性组成，可以组合多个条件。

逻辑运算符的使用

媒体查询支持使用and、not和only等逻辑运算符来构建更复杂的查询条件。

组合多个条件

@media (min-width: 400px) and (max-width: 800px) {
  .container {
    width: 90%;
  }
}

这个查询表示当视口宽度在400px到800px之间时应用样式。

排除特定条件

@media not (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

这个查询表示当设备不是竖屏时隐藏侧边栏。

基于设备特性的查询

除了视口宽度，媒体查询还可以基于多种设备特性。

分辨率查询

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url("logo@2x.png");
  }
}

这个查询为高分辨率屏幕提供更高清的图片。

宽高比查询

@media (aspect-ratio: 16/9) {
  .video-container {
    padding-bottom: 56.25%; /* 16:9宽高比 */
  }
}

嵌套媒体查询

CSS预处理器如Sass允许嵌套媒体查询，使代码更易维护。

.container {
  width: 100%;
  
  @media (min-width: 768px) {
    width: 750px;
  }
  
  @media (min-width: 992px) {
    width: 970px;
  }
}

编译后会生成独立的媒体查询块。

JavaScript中的媒体查询

可以使用window.matchMedia()在JavaScript中检测媒体查询。

const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {
  if (e.matches) {
    console.log('屏幕宽度至少768px');
  } else {
    console.log('屏幕宽度小于768px');
  }
}

mediaQuery.addListener(handleTabletChange);
handleTabletChange(mediaQuery);

媒体查询与CSS变量结合

CSS变量可以与媒体查询结合，创建动态主题。

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

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

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

打印样式优化

媒体查询可以专门针对打印设备优化样式。

@media print {
  .no-print {
    display: none;
  }
  
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
}

视口单位与媒体查询

视口单位(vw, vh)可以与媒体查询结合创建响应式布局。

.container {
  width: 100vw;
  height: 100vh;
}

@media (orientation: landscape) {
  .container {
    width: 70vw;
    margin: 0 auto;
  }
}

媒体查询性能优化

不当使用媒体查询可能影响性能，以下是一些优化建议：

1. 将媒体查询放在样式表底部
2. 避免不必要的复杂查询
3. 使用em而非px作为断点单位

/* 不推荐 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* 样式 */
}

/* 推荐 */
@media (min-width: 48em) {
  /* 样式 */
}

现代布局技术与媒体查询

结合Flexbox和Grid布局使用媒体查询可以创建更灵活的响应式设计。

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

媒体查询与动画性能

在不同设备上控制动画性能。

.box {
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .box {
    transition: none;
  }
}

媒体查询的未来发展

CSS4正在提案更多媒体查询特性，如：

@media (scripting: enabled) {
  /* 当JavaScript可用时的样式 */
}

@media (hover: hover) {
  /* 支持悬停设备的样式 */
}