移动端vue框架实现真正的1px border

1.伪元素设置边框

.border-1px(@color){//传入border眼色传参数

  position:relative;

  &:after {

    display:block;

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    border-bottom:1px solid @color;

    content:'';

}

}

2.在公共.less文件中引用媒体查询解决border宽度缩放问题，并在要给加边框的盒子添加border-1px类样式即可

@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);

}

}

}