详解CSS3 Media Queries中媒体属性的使用

概述

媒体查询（Media Query）是CSS3新增的一个特性，它允许我们针对不同的媒体设备和不同的设备参数（如屏幕宽度、屏幕方向、设备分辨率等）应用不同的CSS样式规则。通过使用媒体查询，我们可以为不同的设备创建不同的布局和风格，从而提高网站的用户体验，提高可访问性。

媒体查询基于媒体类型（media type）和媒体特性（media feature）两个概念，其中媒体类型表示媒体设备的类型（如screen、print、tv等），而媒体特性则表示不同的设备参数，如屏幕宽度、屏幕方向、设备分辨率等。

媒体查询的语法

媒体查询的语法如下：

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

其中，mediatype表示媒体类型，可以是all、print、screen等；and、not、only是逻辑运算符，分别用于组合多个媒体特性、排除一个媒体类型和限制规则的应用；media feature表示媒体特性，可以是width、min-width、max-width、height、min-height、max-height、orientation、aspect-ratio、resolution等，用于限制CSS规则的应用。

常见的媒体特性

以下是媒体查询中常见的媒体特性：

width和height

width和height分别表示媒体视口（viewport）的宽度和高度。它们的单位可以是px、em、rem或百分比等。

示例：

/* 当媒体视口宽度小于等于500px时应用这些样式 */
@media (max-width: 500px) {
  body {
    font-size: 14px;
  }
}

min-width和min-height

min-width和min-height分别表示媒体视口的最小宽度和最小高度，当媒体视口的宽度或高度大于或等于指定的数值时才会应用其中的CSS规则。

示例：

/* 当媒体视口宽度大于或等于768px时应用这些样式 */
@media (min-width: 768px) {
  .container {
    margin: 0 auto;
    max-width: 960px;
  }
}

max-width和max-height

max-width和max-height分别表示媒体视口的最大宽度和最大高度，当媒体视口的宽度或高度小于或等于指定的数值时才会应用其中的CSS规则。

示例：

/* 当媒体视口宽度小于或等于1280px时应用这些样式 */
@media (max-width: 1280px) {
  .header {
    background-color: #f7f7f7;
  }
}

orientation

orientation表示设备的方向，可以是portrait（竖屏）或landscape（横屏）。

示例：

/* 当设备横屏时应用这些样式 */
@media (orientation: landscape) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

resolution

resolution表示设备的屏幕分辨率，单位为dpi（dots per inch）或dppx（dots per pixel）。

示例：

/* 当设备的屏幕分辨率高于200dpi时应用这些样式 */
@media (min-resolution: 200dpi) {
  .logo {
    width: 200px;
  }
}

总结

CSS3媒体查询使得设计师和开发者能够实现响应式布局，根据不同设备特性，对网站的样式和布局进行调整，达到视觉上的完美效果。除了上面列出的媒体特性外，涉及到设备的其他属性如设备类型等，也都可以通过媒体查询来进行控制。