[分享]css中 媒体查询是什么用

在网页开发中，我们经常需要为不同的设备和屏幕大小适配不同的样式。媒体查询（Media Query）是CSS3中新增的一个功能，用于在不同的条件下为页面应用不同的CSS规则。/ 当屏幕宽度小于等于768...

在网页开发中，我们经常需要为不同的设备和屏幕大小适配不同的样式。媒体查询（Media Query）是CSS3中新增的一个功能，用于在不同的条件下为页面应用不同的CSS规则。

/* 当屏幕宽度小于等于768像素时 */
@media screen and (max-width: 768px) {
  body {
    background-color: #f7f7f7;
    font-size: 16px;
  }
}

/* 当屏幕宽度大于768像素时 */
@media screen and (min-width: 768px) {
  body {
    background-color: #ddd;
    font-size: 20px;
  }
} 

在上面的代码中，我们使用媒体查询设置了两组样式，针对不同的屏幕宽度。通过这种方式，我们能够轻松地在不同的设备上展现最佳的页面效果。

媒体查询可以根据多种条件进行设置，例如屏幕宽度、屏幕高度、设备类型、设备旋转等等。它使得开发者可以根据不同的场景为页面应用定制化的样式，提高用户体验和网站性能。

总之，媒体查询是CSS中非常实用的功能之一，它为网页开发带来了更多的灵活性和自由度，让我们可以更好地应对不同的设备和屏幕大小，提高页面的可读性和用户体验。