媒体查询（media query）是css3中重要的一个功能，它允许开发者在不同的设备屏幕上展示不同的页面布局和样式。媒体查询可以根据不同的设备分别设置不同的css属性，以满足不同屏幕的需求。在未来的web设计和开发中，媒体查询将变得越来越重要。在这篇文章中，我们将探讨媒体查询css代码的使用。
媒体查询的语法如下：
@media (media feature) {
/*CSS styles*/
}其中 @media 告诉浏览器这是一个媒体查询，media feature 表示媒体查询所要识别的特定条件，CSS styles 表示针对这个条件应用的 CSS 样式。
下面是一个媒体查询的例子：
@media (max-width: 600px) {
body {
background-color: red;
}
}所以上面的代码表示，当设备的宽度小于或等于 600px 时，使用红色背景颜色。
立即学习“前端免费学习笔记（深入）”；
在媒体查询中，我们可以使用很多 media feature，下面是一些常用的 media feature：
- width：指定终端的宽度。
- height：指定终端的高度。
- device-width：指定终端屏幕的宽度。
- device-height：指定终端屏幕的高度。
- orientation：指定设备的方向是横向还是纵向。
- aspect-ratio：指定终端屏幕的宽高比。
- resolution：指定终端屏幕的分辨率等等。
媒体查询不仅支持单一条件的判断，还允许多个条件组合判断，例如：
@media (max-width: 480px) and (orientation: portrait) {
body {
background-color: yellow;
}
}上面的代码表示当设备的宽度小于或等于 480px，且设备的方向为纵向时，使用黄色作为背景颜色。
还有一种媒体查询：not查询。not查询表示除了某个条件以外，其他条件都满足判断。例如：
@media not (min-width: 768px) {
body {
font-size: 16px;
}
}上面的代码表示当设备的宽度小于 768px 时，字体大小为 16px。
在实际的开发中，我们也可以使用逗号将不同的媒体查询组合在一起，这样就可以针对不同的设备设置不同的CSS属性。例如：
@media (min-width: 768px), handheld and (orientation: landscape) {
body {
font-size: 20px;
}
}上面的代码表示当设备的宽度大于或等于 768px，或者是以横向方式使用手持设备时，字体大小为 20px。
总结一下，媒体查询是CSS3中重要的功能之一，它可以根据设备屏幕的特性来针对不同的设备设置CSS属性，从而实现不同的布局和样式。在实际的开发中，我们可以使用很多不同的 media feature 来组合媒体查询，以达到更好的效果。
