@media 查询可以用来为不同的屏幕尺寸和设备定制 CSS 样式。这样可以确保你的网站在不同的设备上都能够良好地显示。
使用 @media 查询需要媒体条件，比如屏幕宽度或者设备类型等等。以下是一个示例，展示如何使用 @media 查询：
/* 当屏幕宽度小于 600 像素时应用样式 */
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}在这个示例中，@media 查询应用了一个媒体条件，即屏幕宽度小于 600 像素。当达成这个条件时，body 元素的背景色将被设置为黄色。
常见的媒体条件包括以下关键词：
通过使用这些关键词，你可以创建适用于不同设备和媒体的 CSS 样式，从而改善用户体验。