css中如何获取dpr值？

王铁柱666

于 2025-05-09 08:17:46 发布

阅读量144

点赞数 6

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_87873725/article/details/147810159

在CSS中，直接获取设备的DPR（Device Pixel Ratio，设备像素比）值是不可能的，因为CSS是一种样式表语言，主要用于描述文档的呈现样式，而不是进行复杂的逻辑计算或获取设备信息。

然而，你可以通过JavaScript来获取DPR值，并根据这个值来动态调整CSS样式。以下是一个简单的示例，展示了如何使用JavaScript获取DPR值，并根据这个值来设置HTML元素的CSS样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DPR Example</title>
    <style>
        #test {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 初始样式，后续会根据DPR值动态调整 */
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <script>
        // 获取DPR值
        const dpr = window.devicePixelRatio;
        console.log('DPR:', dpr);

        // 根据DPR值动态调整CSS样式
        const testElement = document.getElementById('test');
        if (dpr > 1) {
            // 如果是高清屏（例如Retina屏），可以调整元素的尺寸或背景图片等样式
            testElement.style.transform = `scale(${dpr})`;
            testElement.style.transformOrigin = '0 0';
            testElement.style.width = `${100 / dpr}px`;
            testElement.style.height = `${100 / dpr}px`;
        }
    </script>
</body>
</html>

在这个示例中，我们首先使用window.devicePixelRatio获取了设备的DPR值，并将其输出到控制台。然后，我们根据DPR值动态调整了页面上一个名为test的<div>元素的CSS样式。如果DPR值大于1（表示设备是高清屏），我们通过transform: scale()属性放大了元素，并通过调整元素的宽度和高度来保持其视觉上的尺寸不变。

请注意，这只是一个简单的示例，用于说明如何使用JavaScript和CSS结合来处理DPR值。在实际开发中，你可能需要根据具体需求和场景来制定更复杂的适配策略。