移动端 1px 像素问题及解决办法

前言：在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。

为什么会有1px问题

物理像素:
移动设备出厂时，不同设备自带的不同像素，也称硬件像素;
逻辑像素:
就是css中的像素;

解决办法

@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #ccc }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #ccc }
}

使用transform:scaleY

.line{
width: 100%;
height: 1px;
background-color: black;
margin-top: 100px;
transform: scaleY(0.33333);
transform-origin: 0 0;
}

• 点赞 1
• 收藏
• 分享
• 文章举报