CSS3 多媒体查询实例

概述

随着移动设备的普及和发展，越来越多的用户使用移动设备访问网站，因此响应式设计成为了web设计的一个重要方向。CSS3 中的多媒体查询可以根据设备的特性和特定的条件针对性地应用不同的CSS规则。

语法

@media mediatype and (media feature) {
  CSS rules;
}

其中，mediatype是媒体类型，如screen、print、speech等；media feature是媒体特性，如宽度、高度、设备像素比等。多个媒体条件可以用逗号隔开。

实例

以下是一个简单的实例，通过在不同的设备上应用不同的背景颜色，来展示多媒体查询的用法。

body {
  background-color: blue;
}

@media only screen and (min-width: 600px) {
  body {
    background-color: yellow;
  }
}

@media only screen and (min-width: 900px) {
  body {
    background-color: green;
  }
}

当屏幕宽度小于600像素时，背景颜色为蓝色；当屏幕宽度在600到900像素之间时，背景颜色为黄色；当屏幕宽度大于900像素时，背景颜色为绿色。

媒体查询特性

宽度和高度

min-width和max-width可以分别设置最小宽度和最大宽度，min-height和max-height同理。

@media (min-width: 600px) and (max-width: 900px) {
  /* CSS rules */
}

@media (min-height: 600px) {
  /* CSS rules */
}

设备像素比

设备像素比指的是设备的物理像素与逻辑像素的比值，可以通过min-device-pixel-ratio和max-device-pixel-ratio来设置。

@media (min-device-pixel-ratio: 2) {
  /* CSS rules */
}

方向

可以通过orientation来判断设备的方向，值为landscape表示横屏，值为portrait表示竖屏。

@media (orientation: landscape) {
  /* CSS rules */
}

总结

CSS3 中的多媒体查询可以根据不同的媒体特性和条件来应用不同的CSS规则，从而实现响应式设计。熟练掌握多媒体查询的语法和常用特性，对web设计和开发工作非常有帮助。