CSS中1px分割线处理

 

1. 1px 边框变粗问题

截图如下（iPhone 6截图）：

如果我们把上图与我们手机系统上的 1px 边框进行对比，如下图：

我们会发现，上面两个上下线条，下线条的粗细才是正确的，上线条就显得有点粗了。但是上线条我们是用纯正的 1px border生成的，而下线条我们实际是采用transform压缩了1px高度的一半模拟实现的，也就相当于 0.5px 的高度了。为什么会这样呢？

这是因为在2倍屏时1 CSS 像素实际对应2个物理像素, 所以为了实现真正的 1px 粗细，我们得使用 0.5px 来模拟。目前除 ios8+ 可以直接使用 0.5px 单位外，其余皆得通过模拟的办法搞定

2.解决方案（常用）

.article{
height: 1px;
background: #dbdbdb;
transform:scaleY(0.5);
}

更多1px解决方案参考7种方法解决移动端Retina屏幕1px边框问题

 

参考文章：retina 显示屏