手機端一像素問題

標籤：order   邊框   樣式   orm   otto   color   top   解決辦法   pos   

由於手機dpr(裝置像素比)的問題，webapp中經常會出現1像素邊框的問題，解決辦法如下

//以下代碼是使用sylus實現border-1px($color){    position:relative;    &:after{        display:block;        position:absolute;        left:0;        bottom:0;        border-top:1px solid $color;        content:‘ ‘;        width:100%;    }}//解決辦法@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)

以上代碼可設定在公用樣式中，使用樣本

<div class="tab border-1px"></div>

 

手機端一像素問題