一像素边框实现

下文部分引用于移动端1像素边框问题，这篇文章写得很详细，值得一看。

为什么移动端一像素边框和pc端不一样？

其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用javascript中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。

移动端开发常需要在html的header里添加如下一句：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页面的viewport的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放。

viewport，中文名叫视口，其实它就是设备屏幕上能用来显示我们网页内容的那一块区域，具体点就是浏览器或app中的webview用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，可能大也可能小。体现在用户是否缩放了屏幕。

因此，最终的原因是：viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

如何实现移动端一像素边框？

1. 利用伪类实现一像素边框

   border-1px($color)
     position:relative  
     &:after 
       display:block
       position: absolute
       left:0
       bottom:0
       border-top:1px solid $color
       content:' '
       width:100%
   

2. 利用媒体查询，根据不同的物理像素比，调整缩放比例，从而实现一像素边框

//1.5倍屏
@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)
//2倍屏
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)