1px变粗的主要原因是:通俗的讲就是高清屏,分辨率提高了,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多,这时,一个css像素就不再等于一个物理像素,所以我们就看到粗了。 具体原因可以参看这篇文章:https://www.cnblogs.com/2050/p/3877280.html
我这里就提供几种方法(如果有其他方法,欢迎补充):
1.通过js控制,在Retina屏下,显示0.5px
if(window.devicePixelRatio >=2 || devicePixelRatio >= 2){ $(".contact-dialog .button-tool .tel").css("border-width","0.5px") $(".contact-dialog .button-tool .cancel").css("border-width","0.5px") }
2.通过css的transform + 伪元素
.scale-1px::after{ content:''; position: absolute; bottom: 0; width: 100%; height: 1px; transform: scaleY(0.5); -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); background: #e4e4e4; }