對於前端開發來說，如何完美的還原ui設計圖也是體現了開發功底的，設計師對於我們的要求也是越來越高。例如，如何實現移動端邊框1px？為什麼1px在不同的裝置下展示的粗細不一樣？
說到這裡，我們不得不介紹一下dpr(devicepixelratio) 裝置畫素比,它是預設縮放為100%的螢幕下，裝置畫素和css畫素的比值。
dpr(裝置畫素比) = 物理畫素 / css畫素在 wwdc大會上，對ios8+的並且是dpr=2的裝置來說，給出來了1px方案，當寫 0.5px的時候，就會顯示乙個物理畫素寬度的 border，而不是乙個css畫素的 border。 所以在ios下，你可以這樣寫
border:0.5px solid #e5e5e5這個方法在w3cplus 上的例子講的非常細緻
border: 1px solid transparent;
border-image: url('./../../image/96.jpg') 2 repeat;
box-shadow: 0 -1px 1px -1px #e5e5e5, //上邊線
1px 0 1px -1px #e5e5e5, //右邊線
0 1px 1px -1px #e5e5e5, //下邊線
-1px 0 1px -1px #e5e5e5; //左邊線
//一條border
.setonepx
}
//4條border
.setborderall
}
下面的底邊寬度是虛擬1畫素的
上面的邊框寬度是虛擬1畫素的
.min-device-pixel-ratio(@scale2, @scale3)
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3)
}.border-1px(@color: #ddd, @radius: 2px, @style: solid)
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3)
}}.border-top-1px(@color: #ddd, @style: solid)
}.border-bottom-1px(@color: #ddd, @style: solid)
}.border-left-1px(@color: #ddd, @style: solid)
}
移動端 1px解決方案
var viewport document.queryselector meta name viewport var scale 1 window.devicepixelratio viewport.setattribute content width device width,initial sc...
移動端1px解決方案
lang en charset utf 8 name viewport content initial scale 1,maximum scale 1,minimum scale 1,user scalable no,width device width 移動端1px邊框問題title ul,li ...
移動端1px邊框解決方案
在retina屏中，畫素比為2 iphone6 7 8 或3 iphone6plus 7plus 8plus 1px的邊框看起來比真的1px更寬。元素本身不定義邊框，偽元素定義1px邊框，並且根據根據畫素比值設定縮放比例，畫素比為3時設定為0.33，畫素比為2時設定0.5。html css bord...