移动视图 CSS 的媒体查询

在设计响应式网站时，不同的页面大小和设备类型需要不同的 CSS 样式。为了让页面能够自适应各种设备，CSS3 引入了媒体查询（Media Query）。

媒体查询是一种检测文档所嵌入设备特性的 CSS3 模块。通过检查设备类型、浏览器窗口大小、分辨率、方向等因素，媒体查询可以为不同情况下的页面提供不同样式。这样一来，我们就可以为移动设备和桌面设备分别指定不同的样式。

媒体查询主要有三个部分：媒体类型、条件以及样式。下面是一个简单的媒体查询实例：

@media screen and (max-width: 768px) {
  /* 这里是样式 */
}

• 媒体类型：screen 指代计算机显示屏幕（不包括打印机或其他媒介）。
• 条件：max-width 指的是最大宽度，在这个例子中，窗口大小小于或等于 768 像素。
• 样式：花括号内是这个条件下应用的 CSS 样式。

通常我们建议在 CSS 文件中，先编写全局样式，然后编写移动设备媒体查询的样式，再编写桌面设备媒体查询的样式。这样可以保证样式的优先级和代码的可读性。

下面是一些常见的媒体查询代码示例：

1. 小屏幕设备（手机，平板）：

/* 手机 */
@media screen and (max-width: 480px) { 
  /* 这里是样式 */
}

/* 平板 */
@media screen and (max-width: 768px) {
  /* 这里是样式 */
}

/* 兼容小屏幕设备 */
@media (max-width: 767px) {
  /* 这里是样式 */
}

2. 大型桌面屏幕：

@media (min-width: 1200px) {
  /* 这里是样式 */
}

3. 旋转屏幕：

@media (orientation: landscape) {
  /* 这里是样式 */
}

@media (orientation: portrait) {
  /* 这里是样式 */
}

4. 高分辨率设备：

@media
  (-webkit-min-device-pixel-ratio: 2),
  (min--moz-device-pixel-ratio: 2),
  (-o-min-device-pixel-ratio: 2/1),
  (min-device-pixel-ratio: 2),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx) {
  /* 这里是样式 */
}

5. 浏览器窗口大小：

/* 600 像素及以上 */
@media (min-width: 600px) { 
  /* 这里是样式 */
}

/* 600px 到 900px 之间 */
@media (min-width: 600px) and (max-width: 900px) {
  /* 这里是样式 */
}

/* 900 像素及以下 */
@media (max-width: 900px) {
  /* 这里是样式 */
}

总结：

媒体查询让我们有了更多的控制和灵活性，可以在不同的设备上为用户提供最佳体验。通过编写不同的条件，我们能够在不同的设备和分辨率下使用不同的 CSS 样式，以达到网站视觉效果最佳的效果。