解決移動端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); 

優點：可以滿足所有場景，且修改靈活。缺點：對於已使用偽類的元素要多層嵌套。