面试题系列--【解决移动端1px边框问题】

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

 

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); 
优点:可以满足所有场景,且修改灵活。缺点:对于已使用伪类的元素要多层嵌套。
上一篇:Dom操作之tab栏模板


下一篇:移动端适配flexible rem布局方案