在CSS3中，可以使用媒体查询（Media Queries）来根据设备的特性和屏幕尺寸应用不同的样式。媒体查询允许您根据视口的宽度、高度、设备类型等条件来选择性地应用样式。
以下是媒体查询的基本语法：
@media mediatype and (条件) {
/* 应用的样式 */
}
其中，mediatype指定要使用媒体查询的设备类型（如all、screen等），条件是一个或多个条件表达式，用于指定触发应用样式的条件。
下面是一些常用的示例：
1.根据视口宽度应用样式：
/* 当视口宽度小于等于600px时应用样式 */
@media screen and (max-width: 600px) {
/* 应用的样式 */
}
/* 当视口宽度大于等于800px时应用样式 */
@media screen and (min-width: 800px) {
/* 应用的样式 */
}
2.根据设备类型应用样式：
/* 仅在打印时应用样式 */
@media print {
/* 应用的样式 */
}
/* 仅在屏幕上应用样式 */
@media screen {
/* 应用的样式 */
}
/* 在屏幕和打印上都应用样式 */
@media all {
/* 应用的样式 */
}
3.组合多个条件：
/* 当视口宽度小于等于600px且设备为横向时应用样式 */
@media screen and (max-width: 600px) and (orientation: landscape) {
/* 应用的样式 */
}
媒体查询可以根据不同的条件组合来实现更精确的样式应用。可以根据需要使用任意数量的条件和媒体类型来定义媒体查询
实现响应式布局
下面是一个简单的示例来展示如何使用CSS3实现响应式布局：
<!DOCTYPE html>
<html>
<head>
<style>
/* 响应式布局样式 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
width: 30%;
margin-bottom: 20px;
background-color: #ccc;
padding: 20px;
}
/* 媒体查询，根据不同屏幕尺寸调整布局 */
@media screen and (max-width: 768px) {
.box {
width: 45%;
}
}
@media screen and (max-width: 480px) {
.box {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
在上述示例中，我们创建了一个简单的响应式布局。通过将外层容器设置为弹性盒子，并使用flex-wrap: wrap和justify-content: space-between属性，我们可以让内部的盒子元素在不同屏幕上自动换行并自动调整位置。
通过媒体查询，在不同屏幕尺寸下，我们使用不同的宽度来调整盒子元素的大小。在屏幕宽度小于768px时，盒子的宽度变为45%，在屏幕宽度小于480px时，盒子的宽度变为100%。这样，就可以根据屏幕尺寸动态调整布局，实现响应式效果。
