[置顶] 在retina屏中实现1px border效果

街景wap官网中有在视网膜屏幕中实现1px border的需求.
首先，来看下面视觉给的输出图中的border：

从上面的视觉图可以看到，border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。

注：因为硬件条件的限制，设备像素比（devicePixelRatio）为1的非视网膜屏手机无法达到这样的效果

首先准备一张符合你要求的border-image：

通常手机端的页面设计稿都是放大一倍的，如：为适应iphone retina，设计稿会设计成640*960的分辨率，图片按照2倍大小切出来，在手机端看着就不会虚化，非常清晰。
同样，在使用border-image时，将border设计为物理1px，如下：

样式设置：

.border-image-1px { border-width: 0 0 1px 0; -webkit-border-image: url(linenew.png) 0 0 2 0 stretch; border-image: url(linenew.png) 0 0 2 0 stretch; }

上文是把border设置在边框的底部，所以使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的border的颜色。如果边框底部和顶部同时需要border，可以使用下面的border-image：

样式设置：

.border-image-1px { border-width: 1px 0; -webkit-border-image: url(linenew.png) 2 0 stretch; border-image: url(linenew.png) 2 0 stretch; }

到目前为止，我们已经能在iphone上展现1px border的效果了。但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象，于是使用Media Query做了一些兼容，样式设置如下：

.border-image-1px { border-bottom: 1px solid #666; } 

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-image-1px { border-bottom: none; border-width: 0 0 1px 0; -webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch; border-image: url(../img/linenew.png) 0 0 2 0 stretch; }
}

参考文档：
https://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md
http://css-tricks.com/snippets/css/retina-display-media-query/

下面介绍一下其他方法：
- 设置viewport
直接按照设计师提供的640px宽的设计稿来重构，然后通过控制viewport的initial-scale值为0.5进行缩放，这种方案在ios下可以完美运行（淘宝就是这么做的），但是由于android下不支持initial-scale，所以这个方案不适用于android。

<meta name="viewport" content="initial-scale=0.5,user-scalable=no"/>

• background-image
  跟border-image的方法一样，你要先准备一张符合你要求的图片：

此例是准备将border设置在底部
样式设置：

.background-image-1px { background: url(../img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; }

• box-shadow

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

使用box-shadow都会让线有阴影，甚至颜色变浅。但是使用box-shadow与使用border类似，代码量少，使用方便，而且可以设置圆角矩形，在精细度要求不高的情况下可以尝试使用这种方案。
- 渐变背景
与background-image方案类似，只是将图片替换为css3渐变。
样式设置：

.background-gradient-1px{ background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x; background-size: 100% 1px; }

该方案不能满足1px圆角矩形。
- 缩放
边框由一个元素来承载，将这个元素的高度（或宽度）设置为1px，然后再将该元素缩放1倍。
样式设置：

.scale-1px{ position: relative; }
.scale-1px:after{ content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid #c8c7cc; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; }

• 听说Firefox和Safari8已经支持0.5px的单位了，代码可以像下面这样写：

div{ border:1px solid black; }

@media (-webkit-min-device-pixel-ratio: 2){
 div{ border-width:0.5px; }
}

不过0.5px这个单位有点过于颠覆前端开发的认识了twitter上有位哥们已经被震惊的不知所云

• 基于border-image和transform使用Sass的线下解决方案:
  Mixin：sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
  
  1. 基于border-image：

_onepx.scss:

@mixin onepx($selector, $position: bottom, $color: #666, $onepxImgDirname: './img/linenew.png') {
  #{$selector} {
    border-#{$position}: 1px solid $color;
  }

  @media only screen and (-webkit-min-device-pixel-ratio:2) {
    #{$selector} {
      border-#{$position}: none;
      @if $position == 'bottom' {
        border-width: 0 0 1px 0;
        -webkit-border-image: url($onepxImgDirname) 0 0 2 0 stretch;
        border-image: url($onepxImgDirname) 0 0 2 0 stretch;
      } @else if $position == 'top' {
        border-width: 1px 0 0 0;
        -webkit-border-image: url($onepxImgDirname) 2 0 0 0 stretch;
        border-image: url($onepxImgDirname) 2 0 0 0 stretch;
      } @else if $position == 'right' {
        border-width: 0 1px 0 0;
        -webkit-border-image: url($onepxImgDirname) 0 2 0 0 stretch;
        border-image: url($onepxImgDirname) 0 2 0 0 stretch;
      } @else if $position == 'left' {
        border-width: 0 0 0 1px;
        -webkit-border-image: url($onepxImgDirname) 0 0 0 2 stretch;
        border-image: url($onepxImgDirname) 0 0 0 2 stretch;
      }  
    }
  }
}

test.scss:

@import "onepx";

.container {
  @include onepx('.myonepx', 'top', '#666', './img/linenew.png');
}

@include onepx('.border-top', 'top');
@include onepx('.border-bottom');

执行bat文件：

sass –scss –style expanded test.scss test.css

生成css代码：

.container .myonepx { border-top: 1px solid "#666"; }
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .container .myonepx { border-top: none; border-width: 1px 0 0 0; -webkit-border-image: url("./img/linenew.png") 2 0 0 0 stretch; border-image: url("./img/linenew.png") 2 0 0 0 stretch; }
}

.border-top { border-top: 1px solid #666666; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-top { border-top: none; border-width: 1px 0 0 0; -webkit-border-image: url("./img/linenew.png") 2 0 0 0 stretch; border-image: url("./img/linenew.png") 2 0 0 0 stretch; }
}
.border-bottom { border-bottom: 1px solid #666666; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-bottom { border-bottom: none; border-width: 0 0 1px 0; -webkit-border-image: url("./img/linenew.png") 0 0 2 0 stretch; border-image: url("./img/linenew.png") 0 0 2 0 stretch; }
}

1. 基于transform的缩放：

_onpx.scss

@mixin _prefixDpr($selector, $position: 'top', $pseudo: 'before', $dpr: '2') {
  @media only screen and (-webkit-min-device-pixel-ratio:$dpr) {
    @if $dpr == '1.5' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.7);
        transform: scaleY(.7);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    } @else if $dpr == '2' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    } @else if $dpr == '3' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.3);
        transform: scaleY(.3);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    }
  }
}

@mixin onepx($selector, $position: 'top',$pseudo: 'before', $color: #666) {
    #{$selector}:#{$pseudo} {
      content: ' ';
      display: block;
      border-top: 1px solid $color;
      position: absolute;
      left: 0;
      right: 0;
    }
    #{$selector} {
        position: relative;
        &:#{$pseudo} {
          @if #{$position} == 'top'{
            top: 0;
          } @else if #{$position} == 'bottom' {
            bottom: 0;
          }
        }
    }
    @include _prefixDpr($selector, $position, $pseudo, '1.5');
    @include _prefixDpr($selector, $position, $pseudo, '2');
    @include _prefixDpr($selector, $position, $pseudo, '3');

}

test.scss

@import "onepx";

.container {
  @include onepx('.myonepx');
}

@include onepx('.hello', 'bottom', 'after', '#777');

执行bat文件

sass –scss –style expanded test.scss test.css
生成css代码：

.container .myonepx:before { content: ' '; display: block; border-top: 1px solid #666666; position: absolute; left: 0; right: 0; }
.container .myonepx { position: relative; }
.container .myonepx:before { top: 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .container .myonepx:before { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); -webkit-transform-origin: left top; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .container .myonepx:before { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: left top; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .container .myonepx:before { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); -webkit-transform-origin: left top; }
}

.hello:after { content: ' '; display: block; border-top: 1px solid "#777"; position: absolute; left: 0; right: 0; }

.hello { position: relative; }
.hello:after { top: 0; }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .hello:after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); -webkit-transform-origin: left bottom; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .hello:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: left bottom; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .hello:after { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); -webkit-transform-origin: left bottom; }
}

好处：可以使用习惯的sass写1px的实现方案，并且支持传参，更加灵活。

参考：
http://www.topcss.org/?p=769
谢谢导师donaldyang的指导。