移動端1像素邊框解決方案

移動端css裏面寫了1px, 實際看起來比1px粗,由於css中的1px並不等於移動設備的1px,這些因爲不一樣的手機有不一樣的像素密度css

在window對象中有一個devicePixelRatio屬性,他能夠反應css中的像素與設備的像素比ios

//devicePixelRatio的官方的定義爲:設備物理像素和設備獨立像素的比例,也就是
 //devicePixelRatio = 物理像素 / 獨立像素。

 

很明顯圖一要比圖二更粗,這就是所謂的1px區別spa

 

實現方案:scala

一、僞類 + transform3d

原理是把原先元素的 border 去掉,而後利用 :before 或者 :after 重作 border ,並 transform 的 scale 縮小一半,原先的元素相對定位,新作的 border 絕對定位code

li{position: relative;} li:after{ position: absolute; bottom:0; left:0; content: ''; width:100%; height:1px; border-top:1px solid black; transform: scaleY(0.5);}

 

二、viewport + rem(ios)orm

viewport結合rem解決像素比問題對象

經過設置對應viewport的rem基準值,這種方式就能夠像之前同樣輕鬆愉快的寫1px了blog

在devicePixelRatio = 2 時,輸出viewportrem

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 時,輸出viewport:

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

 

三、使用box-shadow模擬邊框

利用css 對陰影處理的方式實現0.5px的效果

.box-1px { box-shadow: inset 0px -1px 1px -1px black;
}

 

四、background-img漸變

設置1px的漸變背景,50%有顏色,50%透明

.border { background: linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat, linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;

}
相關文章
相關標籤/搜索