移动端1px边框

为什么1px的边框在移动端上显示会比较粗呢？是因为不同的手机有不同的像素密度。物理像素：设备像素;设备独立像素：css像素（虚拟的）;设备像素比：设备独立像素比=物理像素/设备独立像素；普通屏：就是一个设备独立像素等于一个物理像素;二倍屏：就是一个设备独立像素等于4个物理像素;三倍屏：就是一个设备独立像素等于9个物理像素;

那怎么解决呢？看例子吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>border</title>
        <link rel="stylesheet" href="css/1pxBorder.css" />
    </head>
    <body>
        <div class="main">
            <ul>
                <li class="fineBorder-before-all">移动端1px边框的处理方法</li>
                <li class="fineBorder-before-top">移动端1px边框的处理方法</li>
                <li class="fineBorder-before-right">移动端1px边框的处理方法</li>
                <li class="fineBorder-before-bottom">移动端1px边框的处理方法</li>
                <li class="fineBorder-before-left">移动端1px边框的处理方法</li>
                <li class="ff9623-fineBorder-before-all">移动端1px边框的处理方法，有圆角</li>
                <li class="border-width">移动端1px不做处理的边框</li>
            </ul>
        </div>
    </body>
</html>

ul {
    list-style: none;
    li {
        margin: 2.5rem;
    }
}

.fineBorder-before {
    content: "";
    display: block;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
}

.fineBorder-before-all {
    position: relative;
    &:before {
        @extend .fineBorder-before;
        border: 1px solid #f00;
    }
}

.ff9623-fineBorder-before-all {
    position: relative;
    &:before {
        @extend .fineBorder-before;
        border: 1px solid #ff9623;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
    }
}

.fineBorder-before-top {
    position: relative;
    &:before {
        @extend .fineBorder-before;
        border-top: 1px solid #f00;
    }
}

.fineBorder-before-bottom {
    position: relative;
    &:before {
        @extend .fineBorder-before;
        border-bottom: 1px solid #f00;
    }
}

.fineBorder-before-left {
    position: relative;
    &:before {
        @extend .fineBorder-before;
        border-left: 1px solid #f00;
    }
}

.fineBorder-before-right {
    position: relative;
    &:before {
        @extend .fineBorder-before;
        border-right: 1px solid #f00;
    }
}

.border-width {
    border: 1px solid #f00;
}

image.png