CSS媒体查询等于是一种可以帮助开发者在不同设备上展示不同样式的技术。通过使用@media规则和设备的特性进行匹配，开发者可以为不同的设备提供不同的样式和布局。这可以让网页在不同的屏幕尺寸和设备上都能够正常显示。

/* 定义一个媒体查询和屏幕的特性进行匹配 */
@media screen and (max-width: 640px) {
/* 对于屏幕宽度小于等于640像素的设备应用以下样式 */
body {
font-size: 14px;
}
.container {
width: 100%;
}
}
/* 可以使用not关键字来排除某些设备 */
@media not screen and (color) {
/* 把某些颜色屏幕之外的设备的图片隐藏 */
.image {
display: none;
}
}

在使用媒体查询时，需要注意一些事项。首先，应尽量使用宽度相关的特性而不是设备相关的特性来进行匹配。因为有些设备可能有相同的宽度但不同的像素密度，使用宽度相关的特性可以在这些设备上产生更好的效果。

其次，应该考虑使用分别提供专门的样式表而不是使用媒体查询来管理不同的样式。这样可以使代码更加清晰易于维护。但如果需要只有少数样式需要适配不同设备，媒体查询则可以是更加灵活和方便的解决方案。