媒体查询(Media Queries)是CSS3中的一个功能，可以根据不同的设备特性如屏幕尺寸、分辨率等来应用不同的样式规则。
解决方案1：
@media screen and (max-width: 600px) {
body {
background: blue;
}
}在屏幕宽度小于600px时，背景颜色变为蓝色。
解决方案2：
@media screen and (min-width: 600px) and (max-width: 800px) {
body {
background: yellow;
}
}在屏幕宽度在600px到800px之间时，背景颜色变为黄色。
解决方案3：
@media screen and (min-width: 800px) {
body {
background: green;
}
}在屏幕宽度大于800px时，背景颜色变为绿色。
解决方案4：
@media screen and (orientation: landscape) {
body {
background: orange;
}
}在屏幕处于横向模式时，背景颜色变为橙色。
解决方案5：
@media screen and (orientation: portrait) {
body {
background: purple;
}
}在屏幕处于竖向模式时，背景颜色变为紫色。
解决方案6：
@media (max-height: 400px) {
body {
background: pink;
}
}在屏幕最大高度为400px时，背景颜色变为粉色。
解决方案7：
@media (device-aspect-ratio: 16/9) {
body {
background: red;
}
}在屏幕宽高比为16:9时，背景颜色变为红色。
解决方案8：
@media (resolution: 300dpi) {
body {
background: black;
}
}在屏幕分辨率为300dpi时，背景颜色变为黑色。
解决方案9：
@media (scan: progressive) {
body {
background: white;
}
}在屏幕扫描方式为逐行扫描时，背景颜色变为白色。
解决方案10：
@media (grid: 0) {
body {
background: grey;
}
}在屏幕为电子网格或网格类型为0时，背景颜色变为灰色。
注意：媒体查询可以非常复杂，可以应用于各种设备特性，上述示例仅展示了其基本用法和常见用途。