解決移動端1px邊框問題的幾種方法

標籤：webkit   對象   position   sel   color   play   選擇   abs   ret   

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); 優點：可以滿足所有情境，且修改靈活。缺點：對於已使用偽類的元素要多層嵌套。

解決移動端1px邊框問題的幾種方法