问题需求：页面设置边框1像素时，电脑端显示是正常的，手机端会显示比正常粗一点。
1、给需要显示1像素边框的元素添加伪类元素，设置边框为1px。注意：这个时候和直接在元素本身设置边框是一样的效果，达不到真正显示1像素的问题。
2、然后用media 媒体查询，设置伪类元素的缩放比例。
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {.border-1px::after{-webkit-transform: scaleY(0.7);}}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {.border-1px::after{-webkit-transform: scaleY(0.5);}}
3、完整示例
html<div class="tab border-1px"></div>css.tab{display:flex;width:100%;height:40px;line-height:40px;position:relative;}.tab:after{display:block;position:absolute;width:100%;left:0;bottom:0;border-top:1px solid rgba(7,17,27,0.1);content:'';}base.css@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {.border-1px::after{-webkit-transform: scaleY(0.7);}}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {.border-1px::after{-webkit-transform: scaleY(0.5);}}
