如何通过设备代码查询媒体信息？

媒体查询的设备代码用于根据不同设备特性调整网页布局和样式，如手机、平板等。

一、常见设备类型及对应媒体查询代码

设备类型	媒体查询代码示例	说明
桌面端（一般屏幕宽度较大）	`@media only screen and (minwidth: 1200px)`	常用于设计针对大屏幕设备的布局，如电脑显示器等，当屏幕宽度大于等于1200px时，该媒体查询内的样式规则生效，一些大型网站的多栏布局在桌面端可以更好地展示，利用此代码可为其单独设置样式，让内容排列更合理、美观。
平板电脑（中等屏幕宽度）	`@media only screen and (minwidth: 768px) and (maxwidth: 1199px)`	主要针对平板设备进行样式调整，像常见的iPad等平板电脑，其屏幕宽度大致处于这个范围，在这个区间内，可以优化页面元素的显示方式，比如适当调整图片大小、文字排版等，以适应平板的观看体验。
移动端（小屏幕设备）	`@media only screen and (maxwidth: 767px)`	适用于手机等小屏幕移动设备，如今智能手机屏幕尺寸多样，但大多在这个范围内，通过该媒体查询，可对移动端页面进行诸多针对性优化，比如将多栏布局改为单列布局，方便用户单手操作浏览；增大按钮尺寸，便于触摸点击等。

二、不同分辨率下的媒体查询代码

分辨率类型	媒体查询代码示例	适用场景说明
低分辨率（如普通手机屏幕）	`@media only screen and (webkitmindevicepixelratio: 1), only screen and (minresolution: 120dpi)`	对于一些像素密度较低、分辨率相对普通的设备，使用此代码来适配，比如早期部分低端手机或者一些对画质要求不高的场景下，按照这样的媒体查询设置，可以确保页面元素在这种低分辨率屏幕上能够清晰显示，避免出现模糊、排版混乱等问题。
高分辨率（如视网膜屏幕等）	`@media only screen and (webkitmindevicepixelratio: 2), only screen and (minresolution: 240dpi)`	针对像苹果视网膜屏幕这类高分辨率、高像素密度的设备，在这些设备上，需要提供更清晰、细腻的图像和文字显示效果，通过上述媒体查询代码，可以为此类设备专门加载更高清的图片资源，或者调整字体等元素的显示细节，使其在高分辨率屏幕上呈现出最佳的视觉效果。

三、根据设备特性综合查询的代码示例

以下是一个综合考虑屏幕宽度和设备类型的媒体查询代码示例：

/* 针对桌面端大屏幕 */
@media only screen and (minwidth: 1200px) {
    body {
        backgroundcolor: lightblue;
    }
}
/* 针对平板设备 */
@media only screen and (minwidth: 768px) and (maxwidth: 1199px) {
    body {
        backgroundcolor: lightgreen;
    }
}
/* 针对移动端小屏幕 */
@media only screen and (maxwidth: 767px) {
    body {
        backgroundcolor: lightcoral;
    }
}

在这个示例中，根据不同的屏幕宽度范围（也就是前面提到的常见设备对应的屏幕宽度区间），为不同设备设置了不同的背景颜色，以此来直观展示媒体查询在不同设备上的生效情况，实际运用中可以在相应的媒体查询代码块内添加更多具体的样式规则，比如对字体大小、元素间距、布局结构等方面的设置，从而实现更精细化的页面适配效果。