下面是一个简单的媒体查询的例子：
/* 默认样式 */
body {
font-size: 16px;
color: #333;
}
/* 在屏幕宽度小于等于600像素时应用的样式 */
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* 在屏幕宽度大于600像素且小于等于1200像素时应用的样式 */
@media only screen and (min-width: 601px) and (max-width: 1200px) {
body {
color: #666;
}
}
在这个例子中：
- 默认情况下，body 的字体大小是16像素，文字颜色是#333。
- 当屏幕宽度小于等于600像素时，字体大小变为14像素。
- 当屏幕宽度在601像素到1200像素之间时，文字颜色变为#666。
你可以根据需要添加更多的媒体查询，并在其中定义相应的样式规则，以适应不同的设备和屏幕尺寸。这有助于创建响应式的网页设计。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12579/CSS