横屏（Landscape）适配的 CSS 媒体查询技巧

在响应式网页设计和移动端适配中，横屏（Landscape）模式是一个经常被忽视但非常重要的场景。随着移动设备使用场景的多样化，用户在不同屏幕方向下的体验差异变得不容忽视。本文将介绍一些实用的CSS媒体查询技巧，帮助开发者更好地处理横屏适配问题。

为什么需要横屏适配？

横屏模式在以下场景中尤为重要：

最基本的横屏检测媒体查询如下：

css 复制代码

@media screen and (orientation: landscape) {
  /* 横屏样式 */
}

css 复制代码

@media (orientation: landscape) {
  .container {
    flex-direction: row; /* 横排布局 */
  }
  .sidebar {
    width: 30%; /* 侧边栏适当加宽 */
  }
}

css 复制代码

@media (orientation: landscape) and (max-width: 1024px) {
  body {
    font-size: 1.1rem; /* 横屏下略微增大字体 */
  }
}

css 复制代码

@media (orientation: landscape) {
  .hero-image {
    height: 60vh; /* 横屏下增加高度 */
    object-fit: cover;
  }
}

css 复制代码

@media (orientation: landscape) {
  form input, form textarea {
    max-width: 70%; /* 横屏下限制表单元素宽度 */
  }
}

css 复制代码

@media (orientation: landscape) and (min-resolution: 2dppx) {
  /* 高分辨率横屏设备专用样式 */
}

css 复制代码

@media (orientation: landscape) and (max-height: 600px) {
  /* 针对矮屏横屏设备的优化 */
  .header {
    position: sticky;
    top: 0;
  }
}

css 复制代码

@media (orientation: landscape) {
  .navbar {
    flex-direction: row;
    justify-content: space-around;
  }
  .nav-item {
    margin: 0 15px;
  }
}

问题1：横屏下键盘弹出导致布局错乱

css 复制代码

@media (orientation: landscape) {
  .input-container {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

问题2：横屏下元素过于分散

css 复制代码

@media (orientation: landscape) {
  .card-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
}

横屏适配是响应式设计中不可忽视的一环。通过合理的媒体查询和CSS技巧，我们可以为用户在各种设备方向下提供一致的体验。记住，好的设计应该无缝适应所有使用场景，而不仅仅是竖屏模式。