CSS3的media query学习攻略

什么是media query

Media Query是CSS3的一个模块，它的作用是让CSS样式的表现可以根据设备不同的特性进行不同的适配。例如，可以根据设备的屏幕大小、分辨率、设备方向，以及设备终端等信息，来为不同的设备提供不同的样式。

如何使用media query

在CSS中使用media query非常简单，只需要使用@media关键字，然后在括号里指明想要适配的设备特性即可。例如：

@media screen and (max-width: 800px) {
  /* 在屏幕宽度小于800px时应用的样式 */
}

此时，只有当屏幕宽度小于800px时，括号里的样式才会生效。

常见的media query特性

• width：设备宽度，如：width: 600px;
• height：设备高度；
• device-height：设备屏幕的高度，如：device-height: 736px;
• orientation：设备方向，如：orientation: landscape;
• resolution：设备分辨率，如：resolution: 300dpi;
• aspect-ratio：设备宽高比；
• color：设备色彩；
• scan：设备扫描方式；
• grid：设备制式。

示例一：响应式网页布局

在响应式网页设计中，media query是非常常见的应用场景。可以根据不同设备的屏幕宽度来适应不同的网页布局。例如在响应式网页设计中，我们通常会定义三段CSS代码块：

• 基础样式
• 中等屏幕样式（如ipad横屏状态）
• 小屏幕样式（如手机竖屏状态）

以下示例代码展示了如何使用media query完成响应式网页布局：

/* 基础样式 */
body {
  font-size: 16px;
}
h1 {
  font-size: 28px;
}

/* ipad横屏状态 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 18px;
  }
  h1 {
    font-size: 36px;
  }
}

/* 手机竖屏状态 */
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
}

示例二：图片适应不同分辨率

在移动设备上，由于屏幕分辨率的不同，同样一张图片可能会在不同的设备上呈现不同的效果。可以使用media query来解决这个问题。

以下示例代码演示了如何使用media query来为不同的设备分辨率设置不同的背景图片：

/* 高分辨率设备背景图 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
  .background {
    background-image: url("bg-high-resolution.png");
  }
}

/* 普通设备背景图 */
.background {
  background-image: url("bg-normal.png");
}

注意，这里的media query使用了大量的媒体特性，而且兼容性也存在问题，建议在实际应用中谨慎使用。

总结

上述两个示例只是media query的应用场景之一，你可以尝试针对不同的需求去发现相应的应用场景，通过media query来实现更好的网页适配效果。