面试题：CSS媒体查询：响应式布局基础

Question

请描述@media规则的基本语法，并举例说明如何使用媒体查询针对不同屏幕宽度设置不同的CSS样式，例如在屏幕宽度小于600px时，将页面主体的背景颜色设置为浅蓝色。

Answer 1

@media规则的基本语法如下：

@media media-type and (media-feature) {
    /* CSS 样式 */
}

• media-type指定媒体类型，如screen（屏幕）、print（打印）等。
• media-feature是媒体特性，如width（宽度）、height（高度）等。

示例：

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

上述代码表示当屏幕宽度小于等于600px时，将页面主体body的背景颜色设置为浅蓝色。