解决移动端1px边框问题的几种方法

Posted 2020-10-07 for_tomorrow

1、边框粗细原因

在移动端下设置border为1px，在某些设备上看比1px粗。

这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。

devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。

2、解决办法

a、使用border-image实现

 根据需求选择图片，然后根据css的border-image属性设置。代码如下

div
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}

优点：可以设置单条、多条表框。缺点：更换颜色和样式麻烦，某些设备上会模糊。

b、使用background-image实现

background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。优缺点与border-image一样。

.background-image-1px {

background: url(../img/line.png) repeat-x left bottom;

-webkit-background-size: 100% 1px; background-size: 100% 1px;

}

c、使用box-shadow模拟边框

代码如下

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

优点：代码少，兼容性好。缺点：边框有阴影，颜色变浅。

d、伪类 + transform 实现

.border-1px{
  position: relative;
  margin-bottom: 20px;
  border:none;
}

 

  　.border-1px:after{

　　　display :block ; 
 　　 position :absolute;
 　　 bottom :0;
  　　left :0 ;
  　　 width:100%;
  　　 border-top:1px solid $color;
  　　content :‘ ‘;

　　}

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

优点：可以满足所有场景，且修改灵活。缺点：对于已使用伪类的元素要多层嵌套。