CSS `min-width` / `max-width` 结合 `orientation` (`portrait`/`landscape`) 的设备适配

各位观众老爷们，晚上好！今天咱们聊点接地气的，就是怎么用CSS的min-width、max-width配合orientation媒体查询，把咱们的网页在各种奇形怪状的设备上伺候得舒舒服服的。别担心，咱不搞那些高深莫测的理论，直接上代码，保证你听完就能上手。

一、啥是min-width和max-width？

首先，得弄清楚min-width和max-width是干嘛的。它们就像是给元素设置了一个“最小宽度”和“最大宽度”的限制器。

min-width: 元素宽度不能小于这个值。就算你内容再少，也得撑到这个宽度。
max-width: 元素宽度不能大于这个值。就算你内容再多，也撑不到这个宽度。

举个栗子：

.container {
  min-width: 300px;
  max-width: 800px;
}

这段代码的意思是，.container这个元素的宽度最小是300像素，最大是800像素。当屏幕宽度小于300像素时，.container的宽度会保持在300像素；当屏幕宽度大于800像素时，.container的宽度会保持在800像素。中间的情况，它会乖乖地适应屏幕宽度。

二、 orientation媒体查询：让你的网页知道自己是横着还是竖着

orientation媒体查询允许你根据设备的屏幕方向应用不同的CSS样式。它有两个值：

portrait: 竖屏模式。
landscape: 横屏模式。

简单来说，就是让你的网页知道，现在是“立正”还是“稍息”。

@media (orientation: portrait) {
  /* 竖屏时的样式 */
}

@media (orientation: landscape) {
  /* 横屏时的样式 */
}

三、 min-width / max-width + orientation：强强联手，适配神器

现在，咱们把min-width、max-width和orientation媒体查询结合起来，就能实现更精细的设备适配。想象一下，你要做一个响应式的导航栏，在小屏幕竖屏时，导航栏折叠成一个按钮；在大屏幕横屏时，导航栏展开显示。

<nav class="navbar">
  <button class="menu-toggle">Menu</button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}

.menu-toggle {
  display: none; /* 默认隐藏 */
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-right: 20px;
}

/* 小屏幕竖屏时 */
@media (max-width: 768px) and (orientation: portrait) {
  .nav-links {
    display: none; /* 隐藏导航链接 */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 10px;
  }

  .nav-links li {
    margin: 0;
    padding: 10px;
    text-align: center;
  }

  .menu-toggle {
    display: block; /* 显示菜单按钮 */
  }
}

/* 小屏幕横屏时 */
@media (max-width: 768px) and (orientation: landscape) {
  /* 可以根据需要调整样式 */
  .nav-links {
    /* 保持显示，但可以调整布局 */
  }
}

/* 大屏幕时 */
@media (min-width: 769px) {
  .menu-toggle {
    display: none; /* 隐藏菜单按钮 */
  }
}

这段代码实现了以下效果：

默认情况下，导航栏水平排列，菜单按钮隐藏。
当屏幕宽度小于768像素，并且是竖屏时，导航链接隐藏，菜单按钮显示。点击菜单按钮，可以显示隐藏的导航链接（需要JavaScript配合）。
当屏幕宽度小于768像素，并且是横屏时，可以根据需要调整导航链接的样式。
当屏幕宽度大于768像素时，导航栏保持水平排列，菜单按钮隐藏。

四、更多姿势，解锁更多可能

除了上面的例子，min-width、max-width和orientation媒体查询还可以用于各种场景，比如：

图片适配: 根据屏幕方向和宽度，加载不同尺寸的图片，节省流量。

.image-container {
  width: 100%;
}

.image-container img {
  width: 100%;
  height: auto;
}

/* 小屏幕竖屏 */
@media (max-width: 480px) and (orientation: portrait) {
  .image-container img {
    content: url("small-portrait.jpg");
  }
}

/* 小屏幕横屏 */
@media (max-width: 480px) and (orientation: landscape) {
  .image-container img {
    content: url("small-landscape.jpg");
  }
}

/* 大屏幕竖屏 */
@media (min-width: 481px) and (orientation: portrait) {
  .image-container img {
    content: url("large-portrait.jpg");
  }
}

/* 大屏幕横屏 */
@media (min-width: 481px) and (orientation: landscape) {
  .image-container img {
    content: url("large-landscape.jpg");
  }
}

文本布局: 根据屏幕方向和宽度，调整文本的对齐方式、字体大小和行高，提高可读性。

p {
  font-size: 16px;
  line-height: 1.5;
}

/* 竖屏 */
@media (orientation: portrait) {
  p {
    text-align: justify; /* 两端对齐 */
  }
}

/* 横屏 */
@media (orientation: landscape) {
  p {
    text-align: left; /* 左对齐 */
    font-size: 18px;
    line-height: 1.7;
  }
}

表格布局: 根据屏幕方向和宽度，调整表格的列数和单元格的宽度，避免表格溢出。

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>
    <tr>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
      <td>Data 10</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

/* 小屏幕竖屏 */
@media (max-width: 600px) and (orientation: portrait) {
  thead th:nth-child(n+3),
  tbody td:nth-child(n+3) {
    display: none; /* 隐藏第3列及之后的列 */
  }
}

/* 小屏幕横屏 */
@media (max-width: 600px) and (orientation: landscape) {
  /* 可以根据需要调整表格样式 */
}

五、一些小技巧和注意事项

移动优先: 建议采用“移动优先”的开发策略，先为小屏幕设备编写样式，然后再通过媒体查询为大屏幕设备添加样式。
断点选择: 选择合适的断点非常重要。可以参考常见的设备尺寸，或者根据实际的设计需求来确定断点。
调试工具: 使用浏览器的开发者工具可以方便地模拟不同的设备和屏幕方向，帮助你调试响应式布局。
viewport设置: 确保在<head>标签中设置了正确的viewport元标签，以保证页面在移动设备上能够正确缩放。

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

测试！测试！再测试！: 在不同的设备和浏览器上进行充分的测试，确保你的网页在各种情况下都能正常显示。
避免过度使用: 不要为了适配而适配，过度使用媒体查询可能会导致代码冗余和维护困难。
结合 Flexbox 和 Grid: Flexbox 和 Grid 是强大的CSS布局模块，可以与媒体查询结合使用，实现更灵活的响应式布局。

六、总结

min-width、max-width和orientation媒体查询是响应式设计的利器。掌握它们，你就可以轻松地创建出在各种设备上都能完美呈现的网页。记住，响应式设计不仅仅是关于屏幕大小，还包括屏幕方向、设备类型、用户交互方式等等。

技术点	作用
`min-width`	限制元素的最小宽度，确保内容在小屏幕上不会挤压。
`max-width`	限制元素的最大宽度，避免内容在大屏幕上过度拉伸。
`orientation: portrait`	检测设备是否处于竖屏模式，可以针对竖屏设备应用特定的样式。
`orientation: landscape`	检测设备是否处于横屏模式，可以针对横屏设备应用特定的样式。
媒体查询	根据不同的设备特征（如屏幕宽度、屏幕方向等）应用不同的CSS样式，实现响应式布局。
`viewport` 元标签	控制移动设备上的页面缩放和布局，确保页面能够正确显示。
Flexbox / Grid	CSS布局模块，可以与媒体查询结合使用，实现更灵活的响应式布局，简化布局代码。
移动优先策略	先为小屏幕设备编写样式，然后再通过媒体查询为大屏幕设备添加样式，保证在小屏幕上的良好体验。
测试	在不同的设备和浏览器上进行充分的测试，确保网页在各种情况下都能正常显示。

最后，希望今天的讲座对大家有所帮助。记住，实践是检验真理的唯一标准。多写代码，多尝试，你也能成为响应式设计的高手！咱们下期再见！

发表回复 取消回复

发表回复取消回复