CSS 的@media规则，响应式的一种解决方案

CSS的@media规则是一种条件语句，它允许你根据不同的媒体类型和条件来应用不同的样式规则。这使得你能够根据不同的屏幕尺寸、分辨率、设备方向等条件来定制网页的布局和样式，从而创建响应式和适应性强的网站。

基本语法

@media media-type and (media-feature-and-value) {
   
   
  /* CSS 规则 */
}

• media-type：可选。指定媒体类型，如screen（屏幕）、print（打印）、speech（屏幕阅读器）等。如果不指定，则默认为all，表示所有媒体类型。
• media-feature-and-value：必须。一个或多个特性条件，用于测试媒体特征，如min-width、max-width、orientation等，以及它们的值。

示例

根据屏幕宽度调整样式