@media 媒体查询

@media是CSS3中的一个重要特性，它可以根据不同的设备或者不同的屏幕尺寸来设置不同的CSS样式，实现页面在不同设备上的适配。媒体查询通过检查设备的特性（如屏幕宽度、高度、设备方向、分辨率等）来确定当前使用的设备类型，并根据不同的条件应用不同的CSS样式。

媒体查询语法格式为：

@media mediatype and (condition) {
    CSS样式代码
}

其中，mediatype可以是all、screen、print等，condition是媒体查询条件，可以是屏幕宽度、高度、方向、分辨率等。

例如，下面的代码表示在屏幕宽度小于等于600px时应用的样式：

@media screen and (max-width: 600px) {
    body {
        background-color: #f00;
    }
}

相关问题

@media only screen和@media screen效果不一样吗

@media only screen和@media screen是CSS中用于响应式设计的媒体查询规则。它们的效果是不一样的。

@media only screen表示只有在屏幕上显示的时候才会应用该媒体查询规则。这意味着当页面在打印或其他媒体上显示时，该规则将不会生效。这个规则通常用于针对屏幕设备进行样式调整。

而@media screen表示在任何媒体类型为屏幕的设备上都会应用该媒体查询规则。这包括了打印、投影和屏幕等设备。这个规则通常用于针对所有屏幕设备进行样式调整。

所以，它们的区别在于@media only screen只在屏幕上显示时生效，而@media screen在任何屏幕设备上都生效。