如何使用CSS3媒体查询
CSS3媒体查询是一种允许您根据不同屏幕尺寸和设备特性应用不同的CSS样式的技巧。这使您可以针对各种设备（例如台式电脑、平板电脑和手机等）优化布局和设计。要使用CSS3媒体查询，请按照以下步骤操作：
1. 首先，创建一个CSS文件，例如：styles.css。
2. 在该文件中，编写一些用于设置HTML和BODY元素基本样式的样式。例如：
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
```
3. 添加媒体查询。在CSS文件中插入如下代码：
```css
/* Default styles for all devices */
body {
font-size: 16px;
}
/* Styles for screens with a max width of 768px, such as smartphones and small tablets */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Styles for screens with a max width of 480px, such as small smartphones */
@media screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
```
以上示例展示了如何使用媒体查询为不同屏幕尺寸设置不同的字体大小。当屏幕尺寸小于或等于768像素时，将应用第二个样式；当屏幕尺寸小于或等于480像素时，将应用第三个样式。
4. 保存CSS文件并刷新浏览器。在浏览器中打开刚刚创建的HTML文件，查看应用媒体查询后的效果。
通过这种方式，您可以针对不同设备为用户提供更合适的布局和设计。媒体查询可以与其他CSS属性结合使用，以创建更复杂和精细的设计。充分利用媒体查询的优势，可以为您的设计带来更多灵活性和适应性。