thin-border: Retina屏幕下的1px解决方案

问题来源

众所周知，Retina屏幕下将 border 设置为1px , 其显示却比1px大，通常为2px。原因很简单，同样大小的手机一个为普通手机，一个为Retina手机，在css的世界中，其大小都为320px。而Retina屏幕的实际宽度却为640px。这就导致了css中的1px在Retina屏幕中实际为2px。这也是Retina屏幕显示效果比普通要更清晰，售价也更贵的原因所在。

解决方案

问题的原因清楚了，那我们就来谈谈具体的解决办法吧。

方案一: .5px

@media screen and (-webkit-min-device-pixel-ratio: 2) {
border: .5px solid red;
}

该方案本应是最理想的方案，无奈Android与低版本的iOS(ios8才开始支持)不支持该方案。故，放弃!

方案二: border-image

@media screen and (-webkit-min-device-pixel-ratio: 2){
.border{
border: 1px solid transparent;
border-image: url(border.gif) 2 repeat;
}
}

缺点：处理圆角只能这么放大或缩小图片，麻烦

方案三：background渐变（FrozenUI采用该方式实现）

@media screen and (-webkit-min-device-pixel-ratio: 2){
.ui-border-t {
background-position: left top;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#fff),to(#fff));
}
}

缺点：无法实现圆角、一个div上下左右只能实现一个方向、占用background属性

方案四：:before、:after与transform结合 《极力推荐》

简单的实现代码如下：

.radius-border{
position: relative;  /*该句不可少，因为要对:before 进行绝对定位*/
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
.radius-border:before{
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-radius: 8px;
border:1px solid #999;
-webkit-transform(scale(0.5));    /*核心：其实border还是1px，只是缩小一倍后可显示为.5px的效果；同时由于是对:before进行缩小，所以不会影响到div的大小及内容*/
-webkit-transform-origin: 0 0;
transform(scale(0.5));
transform-origin: 0 0;
}
}

优点：圆角、一个div上下左右可同时实现一个或多个（本人目前工作中使用该方式）

缺点：代码量在，且占用了伪元素

结论：最优方案-方案四-sass封装minxin

方案二、三、四可行，《如果考虑到 div大小不定问题》、《圆角问题》、《一个div多边同时实现问题》 这三个问题，毫无疑问，只能选择方案四。但是如果每次都要写一大堆的代码来实现 thin-border 效果。这对我们码农来说简直是一场灾难。

所以本人 用sass实现了 thin-border 系列的 minxin

用法如下：按需求将下面四个中的一个 class 赋给 div 即可，不用对div进行任何额外的处理 (此时该 div 的before元素将被占用)

.thin-border-left{      // 只让 left 边实现thin-border
@include thin-border-left(red);
}
.thin-border-right{     // 只让 right 边实现thin-border
@include thin-border-right(red);
}
.thin-border-top{       // 只让 top 边实现thin-border
@include thin-border-top(red);
}
.thin-border-bottom{    // 只让 bottom 边实现thin-border
@include thin-border-bottom(red);
}
.thin-border-all{   // 四个边同时实现thin-border, 其中 5px 为 border-radio 值
@include thin-border-all(red, 5px);
}