移动端1px问题

问题

css最低只支持1px大小，不足1px就以1px显示，所以在移动端，根据UI设计稿，适配各种屏幕分辨率时，宽高在这个峰值时，就会出现实际结果比设计稿要粗的感觉。

常体现为：多倍的设计图设计了1px的边框，在手机上缩小呈现时，由于css最低只支持显示1px大小，导致边框太粗的效果。

解决方案

通过transform: scale()缩放

单边

如：下边框

.div::after {
	content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #bfbfbf;
    transform: scaleY(1/2);
    transform-origin: left bottom;
}

如果还需要添加其他边框，可以用before伪元素再加，如再加个右边框：

.div::before {
	content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    border-right: 1px solid #bfbfbf;
    transform: scaleX(1/2);
    transform-origin: right bottom;
}

所有边

此种方式可以添加边框圆角：

 .div::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 300%;
    height: 300%;
    border: 1.5px solid #bfbfbf;
    transform: scale(1/1.5/2);
    transform-origin: left top;
    border-radius: 6px;
}

注意点

• 要先给目标div元素添加非static的position属性，因为以上方法都是利用伪元素定位实现
• 具体的scale缩放比例取决于你是几倍设计图尺寸下的1px，例如二倍图(750px)尺寸下，缩放比例就是1/2（敲黑板：scale缩放比例和dpr无关）
• 网上的常规代码会有个别安卓机型边框不显示的问题，我自己的代码已经做了各种兼容处理：单边方案就给伪元素1px的内容区域高度或宽度，加上边框就是2px；所有边的话就基于1.5px边框宽度来进行缩放。

参考

1px像素问题（一）：真正原因

1px像素问题（二）：解决方法

关于多倍图