【笔记】css 1像素边框

 有时候在移动端显示1像素的边框时 可能因为dpi 的原因造成像素有变差 所以为了达到显示的像素达到预期效果就要编写一个css 通用类达到1像素边框的效果

关于dpi 的解释请看张鑫旭老师的文章： http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

下面是代码部分

.border-1px{
      position: relative;
    }
    .border-1px::after{
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-bottom: 1px solid #ccc;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
      .border-1px{
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
      }
    }
    /* 当在手机屏幕显示的时候 缩放0.5 即原来大小的一半 */
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2){
      .border-1px{
        -webkit-transform: scaleY(0.5); 
        transform: scaleY(0.5);
      }
    }

<div id="father" class="border-1px">我是父元素</div>

归根究底，这个1px 边框就是利用  after（或者before）这个伪类利用元素的位置关系进行排列的

最合核心的部分是媒体查询，根据属性  min-device-pixel-ratio  使伪类元素根据屏幕做缩放