优化网页在150%笔记本缩放下的显示效果_笔记本电脑显示150% 网页图片模糊-CSDN博客

本文链接：https://blog.csdn.net/qq_44681558/article/details/118087356

本文详细解释了针对不同设备像素比的媒体查询规则，以优化网页在150%笔记本缩放下的显示效果，涵盖1.19到2.1的设备像素比范围。

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

针对不同设备像素比的媒体查询规则，以优化网页在150%笔记本缩放下的显示效果，涵盖1.19到2.1的设备像素比范围

<style>
@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
(-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
(min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {}


@media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
(-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
(min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {}


@media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
(-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
(min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {}



@media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
(-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
(min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {}


@media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
(-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
(min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {}

</style>