1px问题
1、伪类 +媒体查询控制transform
基于media
查询判断不同的设备像素比对线条进行缩放。
这种方式可以满足各种场景,如果需要满足圆角,只需要给伪类也加上border-radius
即可。
.border_1px:before{ content: ''; position: absolute; top: 0; height: 1px; width: 100%; background-color: #000; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .border_1px:before{ transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio:3){ .border_1px:before{ transform: scaleY(0.33); } }