zh/css/media-queries-tutorial

CSS 媒体查询教程

媒体查询（Media Queries）是 CSS3 的一部分，它允许你根据设备的特性来编写不同的样式规则。这意味着你可以为不同的屏幕尺寸、设备类型或者设备特性（如颜色深度、分辨率等）应用不同的样式。

基本语法

媒体查询的基本语法如下：

@media media-type and (expression) {
  CSS样式;
}

• media-type 可以是 all、screen、print 等。
• expression 是一个条件表达式，用来指定应用样式的设备特性。

示例

以下是一个简单的例子，它会在屏幕宽度小于600px时应用不同的样式：

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

实用技巧

• 使用百分比而不是固定像素值，可以让你的布局在不同设备上更加灵活。
• 使用媒体查询，可以为不同的设备定制不同的字体大小和颜色。
• 使用 @media (orientation: landscape) 可以根据设备方向应用样式。

扩展阅读

更多关于媒体查询的详细信息，请访问我们的CSS媒体查询指南。

[center] [center]