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

前言

上一篇博文分析了1px像素问题的产生原因，
这次就分享一下解决方法。

解决方法有很多，根据项目环境和使用场景选择最合适的就行，下面整理了一下解决方式：

1、通过设置meta标签viewport

分析1px像素产生原因时，有说到meta标签设置的width=device-width，其实这也是产生1px像素问题的前提条件之一，无论你是rem适配方式还是媒体查询的响应式布局，你最终在375px的总宽度下，边框最小css单位也只能是1px，而750px的设计图里1px占1/750，375px里1px占1/375，比例大了一倍，视觉上肯定是粗了。

所以，如果设置content的width就等于设计图大小750px，然后通过动态设置maximum-scale值让网页整体缩放，就能实现效果了，这也是适配移动端不同屏幕大小的一种思路。

以iphoneX为例，

<meta name="viewport" content="width=750,initial-scale=0.5,user-scalable=no">

这样就能让iphoneX完美还原750px的设计图了，initial-scale的值动态设置为window.screen.width / 750，iphoneX下就是0.5。

不过这样设置后，在和其他content属性width值不同的页面间来回切换会出现横向滚动条，不推荐使用（这里介绍这种方法也是帮助更好的理解1px像素问题）。

2、通过transform: scale()缩放（推荐）

（1) 单边

以下边框为例：

.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;
}

（2) 所有边

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

 .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边框宽度来进行缩放。

3、换用淡一点的颜色

这是个人实践出的一个偏方，效果不错又简单，只不过适用性没那么广，也需要对颜色代码有一定的熟悉度。

比如边框颜色，设计图是1px的#ccc的颜色，你可以换成#eee颜色，颜色变淡了在视觉上就有了边框变细的效果。

对于常用的黑色线条，常用颜色码的颜色深度排序：
#000 > #333 > #666 > #999 > #ddd > #ccc > #eee > #efefef
仔细观察以上颜色码，其实规律挺明显的，很好记，记住这些来处理黑色线条的1px问题就足够了