1px问题

最新推荐文章于 2024-03-04 09:35:13 发布

Float544

最新推荐文章于 2024-03-04 09:35:13 发布

阅读量154

点赞数

分类专栏：学习心得文章标签： css3 css javascript

本文链接：https://blog.csdn.net/qq_56392992/article/details/124975016

版权

学习心得专栏收录该内容

162 篇文章 0 订阅

订阅专栏

物理像素：显示器上的真实像素，每个像素的大小是屏幕固有的属性。设备分辨率描述的就是这个显示器的宽和高是多少个设备像素。例如:1920*1080。
设备独立像素：操作系统定义的像素单位。操作系统将设备独立像素转化为设备像素，从而控制屏幕上真正的物理像素点。CSS属于设备独立像素。

设备像素比 = 物理像素 / 设备独立像素
dpr = 1 一个物理像素显示一个设备独立像素
dpr = 2 四个物理像素显示一个设备独立像素

出现移动端1px问题主要是因为设备像素比不为1导致的。在pc上dpr = 1。但在移动设备中基本dpr不为1，这也就导致了在移动端上1px展示的看起来比较粗。

解决方案：
transform + 伪类
dpr = 2 50%
dpr = 3 33.3%

transform:scaleY(0.5)
transform-origin:50% 0;

    <style>
        div{
            height: 150px;
            width: 150px;
            background-color: pink;
            margin: auto;
        }
        div:after{
            content: '';
            display: block;
            width: 100%;
            background-color: black;
            height: 10px;
            transform: scaleY(0.5);
            transform-origin:50% 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>

第二种方法:

box-shadow

Float544

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1px问题

物理像素：显示器上的真实像素，每个像素的大小是屏幕固有的属性。设备分辨率描述的就是这个显示器的宽和高是多少个设备像素。例如:1920*1080。设备独立像素：操作系统定义的像素单位。操作系统将设备独立像素转化为设备像素，从而控制屏幕上真正的物理像素点。CSS属于设备独立像素。设备像素比 = 物理像素 / 设备独立像素dpr = 1 一个物理像素显示一个设备独立像素dpr = 2 四个物理像素显示一个设备独立像素出现移动端1px问题主要是因为设备像素比不为1导致的。在pc上dpr =
复制链接

扫一扫