media适配

@media适配是一种用于响应式网页设计的CSS技术。它通过使用@media规则来根据设备的屏幕尺寸和特性来应用不同的样式。通过在CSS中使用@media规则，可以根据不同的媒体查询条件来应用不同的样式。

例如，可以使用@media规则来为不同的屏幕尺寸设置不同的布局和样式。以下是一个示例：

@media screen and (max-width: 768px) { /* 在屏幕宽度小于或等于768px时应用的样式 */ }

@media screen and (min-width: 769px) and (max-width: 1024px) { /* 在屏幕宽度介于769px和1024px之间时应用的样式 */ }

@media screen and (min-width: 1025px) { /* 在屏幕宽度大于或等于1025px时应用的样式 */ }

在上述示例中，使用@media规则来根据屏幕宽度应用不同的样式。通过设置不同的媒体查询条件，可以根据屏幕尺寸来适配不同的样式和布局。这种技术可以帮助开发者在不同的设备上提供最佳的用户体验。