[分享]css中 media媒体查询如何使用

CSS中的 media 媒体查询是用于在不同媒体设备上显示不同的样式的一种技术。在不同的屏幕或设备上，媒体查询允许我们为不同设备设置不同的样式，从而最大化网站的兼容性和可访问性。媒体查询使用特定的CS...

CSS中的 media 媒体查询是用于在不同媒体设备上显示不同的样式的一种技术。在不同的屏幕或设备上，媒体查询允许我们为不同设备设置不同的样式，从而最大化网站的兼容性和可访问性。

媒体查询使用特定的CSS语法来描述不同的设备和媒体类型。下面是一个使用媒体查询的示例代码：

/* 针对最大屏幕宽度为600像素的设备显示不同样式 */
@media (max-width: 600px) {
  body {
    background-color: #f2f2f2;
    font-size: 14px;
  }
} 

在这个示例代码中，我们定义了一个名为“@media”的CSS块，并在其中指定了一组CSS规则。这些规则只会在最大屏幕宽度为600像素的设备上应用，而在其他设备上则不会生效。

媒体查询不仅限于屏幕宽度。我们可以根据设备的其他属性，例如方向和分辨率等来设置样式。下面是一个根据设备方向横向还是纵向来进行显示不同样式的示例代码：

/* 针对横向屏幕设备显示不同样式 */
@media (orientation: landscape) {
  body {
    background-color: #fff;
    font-size: 16px;
  }
}

/* 针对纵向屏幕设备显示不同样式 */
@media (orientation: portrait) {
  body {
    background-color: #f9f9f9;
    font-size: 18px;
  }
} 

通过这些媒体查询，我们可以针对不同的设备选择不同的样式，使得网站在各种设备上都能得到最佳的显示效果。