下面是一个简单的媒体查询的例子：
/* 默认样式 */
body {
font-size: 16px;
}
/* 在屏幕宽度小于等于600px时应用的样式 */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
在这个例子中：
- 默认情况下，body元素的字体大小是16px。
- 当屏幕宽度小于等于600px时，通过媒体查询，将body元素的字体大小调整为14px。
媒体查询通常包含以下关键部分：
- @media：表示这是一个媒体查询。
- screen：表示适用于屏幕设备。
- (max-width: 600px)：条件，指定了屏幕宽度小于等于600px时应用样式。
你可以根据需要定义多个媒体查询，并在不同的条件下应用不同的样式。例如，你可以为不同的屏幕宽度、设备类型或屏幕方向设置不同的样式。
/* 在小于600px宽度的屏幕上应用的样式 */
@media screen and (max-width: 600px) {
/* 样式规则 */
}
/* 在大于600px宽度的屏幕上应用的样式 */
@media screen and (min-width: 601px) {
/* 样式规则 */
}
/* 在横屏显示时应用的样式 */
@media screen and (orientation: landscape) {
/* 样式规则 */
}
通过结合媒体查询和其他响应式设计技术（如弹性布局、网格布局等），你可以为不同的设备和屏幕尺寸创建适当的布局和样式，以提供更好的用户体验。
转载请注明出处：http://www.zyzy.cn/article/detail/4026/CSS