问题的原因:
因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina
屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了
解决方法: @media(-webkit-min-device-pixel-ratio:2)是指当时显示屏最小的色倍为2倍的
@media (-webkit-min-device-pixel-ratio: 2){
.border-bottom::after {
border-bottom-width: 1px;
}
.border:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: -100%;
bottom: -100%;
left: 0;
border: 0 solid
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
-webkit-transform: scale(.5);
transform: scale(.5);
width: 200%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}