CSS3中引入了一个非常有用的特性——媒体查询，它使我们能够根据不同的设备和浏览器条件应用不同的样式。

其中一种常用的媒体查询条件是“device-pixel-ratio”（DPR），它是指设备物理像素与逻辑像素的比率。用简单的话来说，DPR就是设备屏幕实际像素大小与CSS像素大小的比例。如果一个设备的DPR为2，则设备上每一个CSS像素就会对应两个物理像素。

在CSS中使用DPR媒体查询非常简单，例如：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* 样式代码 */
}

上面的代码中，我们使用了“-webkit-min-device-pixel-ratio”这一CSS属性，它的值为2，表示只有设备的DPR为2时这一段样式代码才会应用。

如果我们需要同时适配多个DPR，可以按照下面的方式编写：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
/* 样式代码 */
}

除了DPR媒体查询，CSS3还提供了其他的媒体特性，包括设备宽度/高度、方向、分辨率等等，这些特性都可以帮助我们更好地适配不同的设备和浏览器。