移動端border為1px的設定方法
阿新 • • 發佈:2018-12-23
一般做了前端一段時間的人都知道,在手機端使用border為1px時在retina屏中會顯示2px畫素,那是因為我們定義的是css的1px,而物理畫素上顯示則因為是一個畫素代表2個畫素,所以出現border為2px,解決方法有很多,我舉一個最容易使用的偽元素方法吧。
使用偽元素的方式
.Bbottom:after{
position:absolute;
content: "";
height:1px;
background:#d5d5d5;
width:100%;
bottom:0;
-webkit-transform:scaleY(.5);
-ms-transform:scaleY(.5);
-o-transform:scaleY(.5);
transform:scaleY(.5);
}
//-webkit-transform:scaleY(.5);是為了使高度為1px縮小為0.5;
//注意偽元素使用時,記得定義父級為position:relative;
.Btop:before{
position:absolute;
content: "";
height:1px;
background:#d5d5d5;
width:100%;
top:0;
-webkit-transform:scaleY(.5);
-ms-transform:scaleY(.5);
-o-transform:scaleY(.5);
transform:scaleY(.5);
}
當然還會有其他的一些因素會來干擾使用方法:
注意點:
1.手機有各種型別的倍數,ios容易辨別2倍和3倍,但android的不同版本就多了--------解決方法是用media來分別判斷並設定(如:@media (-webkit-device-pixel-ratio: 3){})
2.當然原來用一個border:1px solid #000;就能解決的,非得用更多的程式碼去解決,必然在效能上會有一個影響;權衡得失自行考慮(考慮和設計師談談心)
3.更要注意的一點是請考慮相容性問題,這個也是必須要考慮到的,主流瀏覽器一般沒問題,但是用到了一些webview也好,其他的也好,瀏覽器的渲染上就是一個問題了,需要值得注意。