在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%。这样，就可以根据屏幕尺寸动态调整布局，实现响应式效果。
