在HTML中使用媒体查询，可以根据不同的设备特性为内容应用不同的样式。媒体查询的基本结构通常包括@media规则，后面跟随特定的条件以及CSS代码块。
可以针对屏幕类型进行查询，常见的比如电子设备和打印设备。使用@media screen { ... } 来为屏幕设置样式，而@media print { ... } 则适用于打印时的格式。
根据视口宽度，媒体查询能够影响设计的响应。比如@media (min-width: 600px) { ... } 可以针对宽度超过600像素的设备进行样式调整。相对的，@media (max-width: 599px) { ... } 可以应用于较小的屏幕。
除了宽度，还可以针对高度进行条件判断。@media (min-height: 500px) { ... } 用于大于特定高度的屏幕，@media (max-height: 499px) 则应用于较矮的设备。
可以对设备特性进行更加细致的控制，比如分辨率。使用@media (-webkit-min-device-pixel-ratio: 2) { ... } 能为高分辨率屏幕（如视网膜屏）设置样式。
针对方向的查询也是一种常见的方式。@media (orientation: landscape) { ... } 将应用于横屏设备，而 @media (orientation: portrait) 则适用于竖屏设备。这种方式能有效优化用户体验。
除了以上常见的查询，设备类型的查询也很重要。使用@media handheld { ... } 可以为手持设备定制样式，针对其特性提供更佳的布局。
对大于（greater than）和小于（less than）条件的组合操作，可以创建更加复杂的查询。例如，使用@media (min-width: 800px) and (max-width: 1200px) { ... } 来控制在特定宽度范围内的样式。
组合多个特性也是一种有效的策略，@media (max-width: 600px), (orientation: portrait) { ... } 可以在两者都满足时应用样式，这样能提升页面的适应性。
响应式设计可以通过媒体查询实现灵活的布局调整。不同的查询能根据设备环境优化视觉效果，确保内容的可读性和易用性。实际上，媒体查询已经成为现代网页设计中不可或缺的部分。