移动端1px边框处理方法为什么1px的边框在移动端上显示会比较粗呢？是因为不同的手机有不同的像素密度。物理像素：设备像素

为什么1px的边框在移动端上显示会比较粗呢？是因为不同的手机有不同的像素密度。物理像素：设备像素;设备独立像素：css像素（虚拟的）;设备像素比：设备独立像素比=物理像素/设备独立像素；普通屏：就是一个设备独立像素等于一个物理像素;二倍屏：就是一个设备独立像素等于4个物理像素;三倍屏：就是一个设备独立像素等于9个物理像素;

那怎么解决呢？看例子吧。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <title>border</title>
       <link rel="stylesheet" href="css/1pxBorder.css" />
   </head>
   <body>
       <div class="main">
           <ul>
               <li class="fineBorder-before-all">移动端1px边框的处理方法</li>
               <li class="fineBorder-before-top">移动端1px边框的处理方法</li>
               <li class="fineBorder-before-right">移动端1px边框的处理方法</li>
               <li class="fineBorder-before-bottom">移动端1px边框的处理方法</li>
               <li class="fineBorder-before-left">移动端1px边框的处理方法</li>
               <li class="ff9623-fineBorder-before-all">移动端1px边框的处理方法，有圆角</li>
               <li class="border-width">移动端1px不做处理的边框</li>
           </ul>
       </div>
   </body>
</html>

css如下：

ul {
  list-style: none;
  li {
      margin: 2.5rem;
  }
}

.fineBorder-before {
  content: "";
  display: block;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
}

.fineBorder-before-all {
  position: relative;
  &:before {
      @extend .fineBorder-before;
      border: 1px solid #f00;
  }
}

.ff9623-fineBorder-before-all {
  position: relative;
  &:before {
      @extend .fineBorder-before;
      border: 1px solid #ff9623;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      border-radius: 8px;
  }
}

.fineBorder-before-top {
  position: relative;
  &:before {
      @extend .fineBorder-before;
      border-top: 1px solid #f00;
  }
}

.fineBorder-before-bottom {
  position: relative;
  &:before {
      @extend .fineBorder-before;
      border-bottom: 1px solid #f00;
  }
}

.fineBorder-before-left {
  position: relative;
  &:before {
      @extend .fineBorder-before;
      border-left: 1px solid #f00;
  }
}

.fineBorder-before-right {
  position: relative;
  &:before {
      @extend .fineBorder-before;
      border-right: 1px solid #f00;
  }
}

.border-width {
  border: 1px solid #f00;
}