@media使用方法

@media 是 CSS3 中的一个重要特性，它允许我们根据设备的特性（如设备的宽度、高度、方向、分辨率等）来应用不同的样式规则。下面是 @media 的使用方法，按照清晰的结构进行分点表示和归纳：

1. 基本语法

@media 的基本语法如下：

@media mediaType and (mediaFeature) {  
    /* CSS 样式规则 */  
}

4. 示例

• mediaType：媒体类型，常见的媒体类型包括 all（所有设备）、screen（屏幕设备，如电脑、手机、平板等）、print（打印机）等。如果不指定媒体类型，则默认为 all。
• mediaFeature：媒体特性，用于根据设备的属性来选择样式规则。常见的媒体特性包括 width、height、min-width、max-width、device-width、orientation 等。

1. 2. 使用方式

   2.1 外链式

   在 HTML 文件的  标签中使用  标签引入外部 CSS 文件，并在 media 属性中指定媒体查询条件。

   这里表示当视窗宽度大于等于 1200px 时，test.css 中的样式会生效。

   2.2 内部方式

   在 HTML 文件的 

   这里表示当视窗宽度小于等于 1200px 时，.test 类的元素的宽度会被设置为 800px。

2. 以下是一个简单的媒体查询示例，它根据视口宽度（viewport width）来应用不同的背景颜色：

   @media (max-width: 768px) {  
     /* 在视口宽度小于等于 768px 时应用的样式 */  
     body {  
       background-color: lightblue;  
     }  
   }  
     
   @media (min-width: 769px) and (max-width: 1024px) {  
     /* 在视口宽度在 769px 到 1024px 之间时应用的样式 */  
     body {  
       background-color: lightgreen;  
     }  
   }  
     
   @media (min-width: 1025px) {  
     /* 在视口宽度大于等于 1025px 时应用的样式 */  
     body {  
       background-color: lightyellow;  
     }  
   }

• 3. 注意事项

• 在指定设备特性时，需要使用合适的单位和值。
• 媒体查询的顺序很重要，应该先写大的设备特性，再写小的设备特性。

• 当视窗宽度小于 300px 时，修改背景颜色为浅蓝色：

  • not、only 和 and 等关键字可以用于联合构造复杂的媒体查询。
  • 使用逗号 , 可以将多个媒体查询合并为一个规则，当列表中的任何查询为 true 时，整个 media 语句均返回 true。

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

  • 当设备方向为横向时，应用特定的样式：

    @media screen and (orientation: landscape) {  
        /* 横向时的样式 */  
    }

  • 通过 @media 规则，我们可以实现响应式设计，使网页能够在不同设备和屏幕尺寸下都有良好的显示效果。