course/css3_media_queries

CSS3 媒体查询是响应式网页设计的关键技术之一，它允许开发者根据不同的屏幕尺寸和设备特性来应用不同的样式。以下是一些关于 CSS3 媒体查询的基本信息和示例。

媒体查询语法

@media media-type and (expression) {
  /* CSS 样式规则 */
}

• media-type 可以是 all、screen、print、speech 等。
• expression 是一个条件表达式，通常包含宽度、高度、分辨率等参数。

常用媒体查询参数

• width: 视口宽度。
• height: 视口高度。
• min-width: 最小宽度。
• max-width: 最大宽度。
• min-height: 最小高度。
• max-height: 最大高度。
• orientation: 设备方向，可以是 portrait 或 landscape。

示例

假设我们要为不同屏幕尺寸的设备设置不同的背景颜色：

@media screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: #0f0;
  }
}

@media screen and (min-width: 1025px) {
  body {
    background-color: #00f;
  }
}

以上代码将根据屏幕尺寸设置不同的背景颜色。

图片示例

响应式设计

更多信息

想要了解更多关于 CSS3 媒体查询的信息，请访问本站响应式设计教程。

抱歉，您的请求不符合要求