移動端1px的終極版解決方案

/* 使用時候加上這個類就好了border-1px top-1px bottom-1px topBottom-1px left-1px right-1px less sass 版本*/ .border-1px, .top-1px, .bottom-1px, .topBottom-1px, .left-1px, .right-1px { position: relative;
}

/* 全邊框 */ .border-1px { &:before { .allBorder();
  } } /* 上邊框 */ .top-1px { &:before { .topBorder();
  } } /* 下邊框 */ .bottom-1px { &:after { .bottomBorder();
  } } /* 上下邊框 */ .topBottom-1px { &:before { .topBorder();
  } &:after { .bottomBorder(); } } /* 左邊框 */ .left-1px { &:before { .leftBorder();
  } } /* 右邊框 */ .right-1px { &:after { .rightBorder();
  } } .allBorder(@color: #eee) { content: " "; position: absolute; left: 0; top: 0; width: 200%; border: 1px solid @color; color: @color; height: 200%; transform-origin: left top; transform: scale(0.5);
} .topBorder(@color: #eee) { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid @color; color: @color; transform-origin: 0 0; transform: scaleY(0.5);
} .bottomBorder(@color: #eee) { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid @color; color: @color; transform-origin: 0 100%; transform: scaleY(0.5);
} .leftBorder(@color: #eee) { content: " "; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid @color; color: @color; transform-origin: 0 0; transform: scaleX(0.5);
} .rightBorder(@color: #eee) { content: " "; position: absolute; right: 0; top: 0; width: 1px; bottom: 0; border-right: 1px solid @color; color: @color; transform-origin: 100% 0; transform: scaleX(0.5);
}

/* px2remLoader 插件下轉換 const px2remLoader = { loader:'px2rem-loader', options:{ remUnit:75 } } 
css 版本
*/ .border-1px:before { content: " "; position: absolute; left: 0; top: 0; width: 200%; border: 0.013333rem solid #eee; color: #eee; height: 200%; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0.5); transform: scale(0.5);
} .top-1px:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 0.013333rem; border-top: 0.013333rem solid #eee; color: #eee; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
} .bottom-1px:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 0.013333rem; border-bottom: 0.013333rem solid #eee; color: #eee; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
} .topBottom-1px:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 0.013333rem; border-top: 0.013333rem solid #eee; color: #eee; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
} .topBottom-1px:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 0.013333rem; border-bottom: 0.013333rem solid #eee; color: #eee; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
} .left-1px:before { content: " "; position: absolute; left: 0; top: 0; width: 0.013333rem; bottom: 0; border-left: 0.013333rem solid #eee; color: #eee; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5);
} .right-1px:after { content: " "; position: absolute; right: 0; top: 0; width: 0.013333rem; bottom: 0; border-right: 0.013333rem solid #eee; color: #eee; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5);
}