Retina(视网膜)屏幕的1px如何实现


字数:420 阅读时长:1分钟 阅读:85

开发过移动H5或者混合APP的前端小伙伴,估计都体会过各个机型兼容适配的痛苦。有时候为了 1px 而绞尽脑汁,本文就详细介绍一下 Retina (视网膜)屏幕的 1px 的实现方法。

DPR 1PX

背景

如果仅仅使用 css 的 1px 来设置 border ,那可能会出现比较粗的情况。因为有些手机屏幕的 DPR = 2,还有 DPR = 3 的情况,即 1px 它会用两个物理像素来显示,自然就粗了。
而这时候,你不能直接写 0.5px ,因为浏览器兼容性不好,渲染出来可能还是 1px 的效果,甚至无法正常显示。

PS:DPR 即为像素比,是 Window 对象下的一个属性,可以用以下方法获取。

1
const DPR = window.devicePixelRatio

解决单边框 border 问题

我们可以使用 css 伪类 + transform 缩小来优化这一问题。即把默认的 1px 宽度给压缩 0.5 倍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box {
width: 200px;
height: 100px;
padding: 10px 0;
position: relative;
}

#box::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #333;
transform: scaleY(0.5);
transform-origin: 0 0;
}

解决 border-radius 为 1px 的情况

如果有 border-radius 就不能使用 transform 进行缩放了,因为如果是整体缩放,肯定会影响其中的content内容,这时就可以巧用 box-shadow 设置来解决。

box-shadow属性的值依次是:

  • X 偏移量 0
  • Y 偏移量 0
  • 阴影模糊半径 0
  • 阴影扩散半径 0.5px
  • 阴影颜色 #333
1
2
3
4
5
6
7
8
9
#box {
width: 200px;
height: 100px;
margin-top: 20px;
padding: 10px;
border-radius: 10px;
/* border: 1px solid #333; */
box-shadow: 0 0 0 0.5px #333;
}


Perfect solution ^_^


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-03-14
最后更新: 2023-07-17
本文标题: Retina(视网膜)屏幕的1px如何实现
本文链接: https://www.tiven.cn/p/79655102/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!