移動端一像素問題

標籤：webkit   import   bug   16px   abs   2.0   移動   移動端   替代   

最近我發現移動端中的一像素會有bug，為什麼呢？我發現在測試時候，不同大小的手機一像素的邊框會隨螢幕變化。雖然不是很大的問題，但我發現面試的時候也會問，所以我就尋找了一些回答來總結一下。

1. 可以用縮小放大transform中的scale來實現：

   .border-bottom{    position: relative;    border-top: none !important;}.border-bottom::after {    content: " ";    position: absolute;    left: 0;    bottom: 0;    width: 100%;    height: 1px;    background-color: #e4e4e4;    -webkit-transform-origin: left bottom;    transform-origin: left bottom;}

   然後通過媒體查詢

   /* 2倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {    .border-bottom::after {        -webkit-transform: scaleY(0.5);        transform: scaleY(0.5);    }}/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {    .border-bottom::after {        -webkit-transform: scaleY(0.33);        transform: scaleY(0.33);    }}

   其實是一像素的高度的區塊層級元素。

2. 第二種的方法很簡單，就用一像素的圖片來替代。

   .border-image-1px {    border-width: 1px 0px;    -webkit-border-image: url("##") 2 0 stretch;}

    

移動端一像素問題