移动端的布局用过媒体查询吗？写出例子看看

是的，移动端布局经常使用媒体查询。以下是一些例子，展示了如何使用媒体查询来创建响应式设计：

1. 基于视口宽度的基本媒体查询：

/* 在视口宽度小于 768px 时应用样式 */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .container {
    width: 90%; /* 将容器宽度设置为视口宽度的 90% */
    padding: 10px;
  }
  .sidebar {
    display: none; /* 隐藏侧边栏 */
  }
  .main-content {
    width: 100%; /* 主内容占据整个宽度 */
  }
}

/* 在视口宽度大于等于 768px 时应用样式 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .container {
    width: 750px; /* 设置固定宽度 */
    padding: 20px;
  }
  .sidebar {
    display: block; /* 显示侧边栏 */
    width: 25%;
    float: left;
  }
  .main-content {
    width: 75%;
    float: left;
  }
}

2. 使用多个媒体查询处理不同屏幕尺寸：

/* 手机 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* 平板电脑 */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 桌面 */
@media (min-width: 769px) {
  body {
    font-size: 18px;
  }
}

3. 结合方向的媒体查询：

/* 横屏模式 */
@media (orientation: landscape) {
  .container {
    height: 80vh; /* 设置容器高度为视口高度的 80% */
  }
}

/* 竖屏模式 */
@media (orientation: portrait) {
  .container {
    height: auto;
  }
}

4. 使用min-device-width 和 max-device-width (不推荐，但了解一下):

min-device-width 和 max-device-width 指的是设备的物理宽度，而不是浏览器的宽度。由于现在设备像素比的多样性，这可能会导致问题，因此通常建议使用min-width 和 max-width。

最佳实践:

• Mobile-first: 建议采用移动优先的策略，先为小屏幕设计样式，然后使用 min-width 媒体查询逐步添加大屏幕的样式。
• 使用清晰的断点: 选择合适的断点值，使设计在不同屏幕尺寸上都能良好呈现。
• 组织好媒体查询: 将媒体查询放在 CSS 文件的底部或单独的 CSS 文件中，以便于维护。

这些例子展示了如何使用媒体查询来根据不同的屏幕尺寸和方向应用不同的样式。 通过灵活运用媒体查询，可以创建适应各种设备的响应式网页设计。