移动端一像素

最新推荐文章于 2024-03-19 00:36:28 发布

言玉gz

最新推荐文章于 2024-03-19 00:36:28 发布

阅读量230

点赞数

分类专栏： css 文章标签：移动端一像素

本文链接：https://blog.csdn.net/u010811939/article/details/80235385

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概念

CSS像素：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在
物理像素：物理像素，设备能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的设备像素单位。
设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。
DPR（window.devicePixelRatio）：是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例, 公式表示就是：window.devicePixelRatio = 物理像素 / dips

大部分浏览器devicePixelRatio值为1，当它们移动到视网膜类似设备时候，可能就会遇到问题。
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素，1px代表2个物理长度；

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素，1px代表3个物理长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .onePixel {
          position: relative;
        }
        .onePixel:after {
            display: block;
            width: 100%;
            height: 0;
            content: '';
            border-bottom: 1px solid black;
        }
        @media (-webkit-device-pixel-ratio: 2),(device-pixel-ratio: 2) {
            .onePixel {
                transform: scaleY(0.5);
                -webkit-transform: scaleY(0.5);
            }
        }
        .onePixel2 {
            position: relative;
        }
        .onePixel2:after {
            display: block;
            width: 100%;
            height: 0;
            content: '';
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class = "onePixel"></div>
    <br/>
    <br/>
    <br/>
    <div class = "onePixel2"></div>
</body>
</html>

效果图

详情代码

言玉gz

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端一像素

概念CSS像素：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在物理像素：物理像素，设备能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的设备像素单位。设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。 DPR（window.devicePixelRatio）：是设备上物理...
复制链接

扫一扫