1px解决方案

1. 在移动端中，如果给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗的。

解决方法：使用伪类元素模拟边框，使用transform缩放

.button
{
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: white;
    border: none;
    outline: none;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    text-decoration: none;
    display: block;
}
.button:after
{
    content: '';
    z-index: 1;
    position: absolute;
    border: 1px solid rgba(0,0,0,0.23);
    pointer-events: none;
    box-sizing: border-box;
    transform-origin: 0 0;
    transform: scale(calc(1/1));
    top: 0px;
    left: 0px;
    width: calc(100% * 1);
    height: calc(100% * 1);
    border-radius: calc(5px * 1);
    transition: all ease-in-out 150ms;
    background-color: rgba(0,0,0,0);
}
.button:active:after
{
    background-color: rgba(0,0,0,0.1);
}
.button.button-blue
{
    background-color: #3F51B5;
    color: white;
}
.button.button-blue:active:after
{
    background-color: rgba(0,0,0,0.15);
}
@media screen and (-webkit-min-device-pixel-ratio: 2)
{
    .button:after
    {
        border-radius: calc(5px * 2);
        width: calc(100% * 2);
        height: calc(100% * 2);
        transform: scale(calc(1/2));
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3)
{
    .button:after
    {
        border-radius: calc(5px * 3);
        width: calc(100% * 3);
        height: calc(100% * 3);
        transform: scale(calc(1/3));
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 4)
{
    .button:after
    {
        border-radius: calc(5px * 4);
        width: calc(100% * 4);
        height: calc(100% * 4);
        transform: scale(calc(1/4));
    }
}

1. 对于老项目伪类+transform

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。 单条border样式设置： 优点：所有场景都能满足，支持圆角(伪类和本体类都需要加border-radius) 缺点：对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

.scale-1px{ position: relative; border:none; }
    .scale-1px:after{
    content: '';
    position: absolute; bottom: 0;
    background: #000;
    width: 100%; height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
     -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

1. viewport + rem 实现

这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。

HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
    position: relative;
}

.border-1px:after {
    position: absolute;
    content: "";
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-top: 1px solid #666;
}

@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
    border-1px::after {
        -webkit-transform: scaleY(0.33333333);
        transform: scaleY(0.33333333);
    }
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
    border-1px::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

优点：所有场景都能满足，一套代码，可以兼容基本所有布局 缺点：老项目修改代价过大，只适用于新项目

1. 使用box-shadow模拟边框,利用css 对阴影处理的方式实现0.5px的效果

样式设置：

.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

优点：代码量少，可以满足所有场景 缺点：边框有阴影，颜色变浅