移动端实现1px边框

-由于设备像素比存在的原因，我们在处理设计图的一些边框时，对于1px的border，如果在代码里将其写死，可能在不同设备像素比的设备中，粗细不一样，尤其是在目前大多数设备像素比为2的设备中，过粗。
那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定，实现货真价实的1px border。

.border-1px{     position: relative};.border-1px::after{    display: block    position: absolute    left: 0    bottom: 0    width: 100%    border-top: 1px solid $color    content: ' '}

使用媒体查询技术`;
注意这里min-device-pixel-ratio的定义，其实就是等于
window.devicePixelRatio，是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

@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)      transform: scaleY(0.5)  }}