移动端1px适配

明明设置了边框是1px，你为什么在移动端上看起来像2px？

方法1：

采用box-shadow

.box{
    box-shadow:0px 1px 1px -1px #000;//下边线
    box-shadow:0px -1px 1px -1px #000;//上边线
    box-shadow:1px 0px 1px -1px #000;//右边线
    box-shadow:-1px 0px 1px -1px #000;//左边线
}

方法2：

采用伪元素和transform:scale();来实现

.box{
    position:relative;
}
//左边线
.box::after{
    content:'';
    position:absolute;
    display:block;
    left:0;
    top:0;
    background-color:#000;
    width:1px;
    height:100%;
    transform:scale(0.5);
    transform-origin:left top;
}
//右边线
.box::after{
    content:'';
    position:absolute;
    display:block;
    right:0;
    top:0;
    background-color:#000;
    width:1px;
    height:100%;
    transform:scale(0.5);
    transform-origin:right top;
}
//上边线
.box::after{
    content:'';
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:1px;
    background-color:#000;
    transform:scale(0.5);
    transform-origin:left top;
}
//下边线
.box::after{
    content:"";
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background-color:#000;
    transform:scale(0.5);
    transform-origin:left bottom;
}

//四边都有
.box::after{
    content:'';
    position:absolute;
    display:block;
    box-sizing:border-box;
    left:0;
    top:0;
    width:200%;
    height:200%;
    border:1px solid #000;
    transform:scale(0.5);
    transform-origin:left top;
}

Tips:

​ 水平的边width:100%;height:1px;

​ 垂直的边:height:100%,width:1px;

方法3

通过设置viewport的scale值。还没有理解这种方法，先贴上链接，以后再去慢慢研究

移动端1px解决方案