视口相关的媒体特性

视口相关的媒体特性在响应式设计中扮演着关键角色，它们允许开发者根据设备的视口尺寸、方向或分辨率动态调整样式。这些特性通常与 @media 规则结合使用，能够精确控制不同设备上的布局表现。

视口宽度与高度

width 和 height 是最常用的视口媒体特性，用于匹配视口的宽度和高度。它们的值可以是具体像素值，也可以是范围表达式。

/* 当视口宽度等于600px时应用样式 */
@media (width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当视口宽度大于等于768px时应用样式 */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 当视口高度小于400px时应用样式 */
@media (max-height: 400px) {
  header {
    padding: 0.5rem;
  }
}

范围查询可以使用 and 组合多个条件：

/* 视口宽度在600px到900px之间 */
@media (min-width: 600px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

设备方向

orientation 特性检测设备是横屏还是竖屏模式，接受 portrait（竖屏）和 landscape（横屏）两个值。

/* 横屏模式下的样式调整 */
@media (orientation: landscape) {
  .gallery {
    flex-direction: row;
  }
}

/* 竖屏模式下的特殊布局 */
@media (orientation: portrait) {
  .hero-section {
    height: 70vh;
  }
}

宽高比

aspect-ratio 特性基于视口的宽高比应用样式，比值表示为宽度/高度。

/* 16:9宽高比下的视频播放器样式 */
@media (aspect-ratio: 16/9) {
  .video-player {
    width: 100%;
    padding-bottom: 56.25%; /* 9/16=0.5625 */
  }
}

/* 宽高比大于1（横向矩形） */
@media (min-aspect-ratio: 1/1) {
  .logo {
    width: 120px;
  }
}

分辨率检测

resolution 特性针对不同像素密度的设备提供精细控制，单位可以是 dpi、dpcm 或 dppx。

/* 高分辨率设备（2x及以上） */
@media (min-resolution: 2dppx) {
  .icon {
    background-image: url("icon@2x.png");
    background-size: contain;
  }
}

/* 打印媒体且分辨率高于300dpi */
@media print and (min-resolution: 300dpi) {
  figure {
    break-inside: avoid;
  }
}

动态视口单位

现代CSS引入了动态视口单位，与媒体查询配合能实现更灵活的响应式设计：

/* 小视口高度适配 */
@media (max-height: 600px) {
  .modal {
    height: 100svh; /* 使用小视口高度单位 */
  }
}

/* 横向滚动布局在大视口下的表现 */
@media (min-width: 1200px) {
  .carousel {
    width: 100lvw; /* 大视口宽度单位 */
  }
}

组合查询示例

实际项目中常需要组合多个特性：

/* 平板设备横屏模式且宽度至少1024px */
@media (orientation: landscape) and (min-width: 1024px) 
       and (hover: hover) {
  .nav-menu {
    position: sticky;
    top: 0;
  }
}

/* 高分辨率手机竖屏模式 */
@media (max-width: 480px) and (orientation: portrait) 
       and (min-resolution: 2dppx) {
  .text-content {
    font-size: calc(1rem + 1dvw);
  }
}

现代布局技术的结合

视口媒体特性可以与CSS Grid和Flexbox等现代布局技术深度整合：

/* 响应式网格布局 */
@media (min-width: 800px) {
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2vw; /* 视口相对间距 */
  }
}

/* 弹性容器在窄视口下的调整 */
@media (max-width: 599px) {
  .flex-container {
    flex-direction: column;
    --item-margin: 3vmin; /* 使用视口最小单位 */
  }
}

实际应用场景

1. 导航栏转换：

@media (max-width: 767px) {
  .desktop-nav {
    display: none;
  }
  .mobile-menu-button {
    display: block;
  }
}

2. 字体大小响应：

@media (min-width: 1200px) {
  :root {
    --base-font-size: calc(16px + 0.1vw);
  }
}

3. 图像自适应：

@media (min-resolution: 2dppx) and (max-width: 1024px) {
  .hero-image {
    background-image: url("retina-mobile.jpg");
  }
}

浏览器支持与渐进增强

虽然现代浏览器普遍支持视口媒体特性，但需要考虑回退方案：

/* 基础样式 */
.card {
  width: 100%;
}

/* 渐进增强 */
@media (min-width: 640px) {
  .card {
    width: calc(50% - 1rem);
  }
}