1px边框的问题

实际开发中，我们会遇到一个问题，我们设置的1px边框在移动端设备中显示的比正常的要粗一些。其原因是因为，在移动端中边框被放大了。

首先我们要理解两个概念：

逻辑像素：开发中的px，1px即代表一个逻辑像素

物理像素：屏幕的实际分辨率

像素比：逻辑像素/物理像素

例如iphone6的横向的逻辑像素是375px,横向分辨率是750，所以像素比就是2。 iphone6p的逻辑像素是414，分辨率是1242，所以他的像素比就是3。

在实际开发中我们虽然设置了border:1px，但是在像素比为2的屏幕中，1px的宽度显示的是预想中的两倍。

为了解决这个问题，我们可以利用媒体查询和min-device-pixel-ratio（获取像素比），来实现货真价实的1px border。

原来其实很简单，在像素比为2的时候，边框会比原来的要宽，那我们就设置缩放为原来的0.5,让它缩小一点。

代码如下

$border-poses:top,right,bottom,left;$color:red;@mixin border-1px($color:$color, $poses:$border-poses) {    position: relative;    &::after {        content: '';        display: block;        position: absolute;        width: 100%;        @each $pos in $poses {            border-#{$pos}: 1px solid $color;            #{$pos}: 0;        }    }}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio: 1.5) {    .border-1px &::after {        -webkit-transform: scaleY(0.7);        transform: scaleY(0.7);    }}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio: 2) {    .border-1px &::after {        -webkit-transform: scaleY(0.5); //像素比为2的时候，我们设置缩放为0.5        transform: scaleY(0.5);    }}@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio: 3) {    .border-1px &::after {        -webkit-transform: scaleY(0.333333);//像素比为3的时候，我们设置缩放为0.33333        transform: scaleY(0.333333);    }}复制代码