如何判断dpr的倍数

最新推荐文章于 2025-06-04 13:12:36 发布

weixin_33972649

最新推荐文章于 2025-06-04 13:12:36 发布

阅读量482

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ruchang/p/9966135.html

本文介绍如何使用CSS媒介查询中的max-device-pixel-ratio和max-resolution属性来判断不同设备的显示倍率，适用于retina屏幕和其他高分辨率设备的设计响应式网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. js中有window.devicePixelRatio可直接查看倍率。

2. 用css技术判断dpr的倍数

　　响应式设计：（媒介查询）通过设置断点来实现响应。

max-device-pixel-ratio:最大设备dpr

max-resolution：最大像素密度

//retina1x
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)
//retina2x
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
//retina3x
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx)

转载于:https://www.cnblogs.com/ruchang/p/9966135.html