面试题：CSS媒体查询@media规则在响应式设计中的基础应用

Question

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

Answer 1

1. @media规则基本语法：

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

   • media - type：指定媒体类型，常见的有all（用于所有设备）、screen（用于屏幕设备）、print（用于打印）等。
   • media - feature：指定媒体特性，例如width（宽度）、height（高度）、orientation（方向，如portrait纵向、landscape横向）等。

2. 针对不同屏幕宽度设置CSS样式示例：

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

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