使用css3的@media查询以响应不同的设备和屏幕大小

CSS3的@media查询

CSS3的@media查询是一种响应式设计技术，它可以根据不同的设备和屏幕大小来调整网页的布局和样式。它可以检测屏幕的宽度、高度、设备的类型等信息，并根据这些信息来自动调整网页的布局和样式。

使用@media查询的方法

使用@media查询的方法非常简单，只需要在CSS文件中添加一个@media查询声明，就可以根据不同的设备和屏幕大小来调整网页的布局和样式。

@media screen and (max-width: 960px) {
    body {
        font-size: 12px;
    }
}

@media screen and (min-width: 960px) {
    body {
        font-size: 16px;
    }
}

上面的代码中，@media查询声明会检测屏幕的宽度，如果屏幕宽度小于960px，就会应用第一个声明中的样式，如果屏幕宽度大于960px，就会应用第二个声明中的样式。

@media查询还可以检测设备的类型，比如检测是否是移动设备，可以使用如下的声明：

@media only screen and (max-device-width: 480px) {
    body {
        font-size: 12px;
    }
}

上面的代码中，@media查询声明会检测设备的宽度，如果设备宽度小于480px，就会应用声明中的样式。

@media查询是一种非常有用的响应式设计技术，它可以根据不同的设备和屏幕大小来调整网页的布局和样式，使网页在不同的设备上都能正常显示。