由于分辨率 DPI 的差異，高清手機屏上的 1px 實際上是由 2×2 個像素點來渲染，有的屏幕甚至用到了 3×3 個像素點
所以在實際的代碼實現(xiàn)中重归，設置1px的邊框，會渲染成2px.
雖然這一像素的差別厦凤，用戶在實際體驗中是很難察覺到的鼻吮，但是作為一個具備‘像素眼’的前端來說，這是不可容忍的泳唠。
解決辦法：
一狈网、使用transform： scale
先使用偽類 :after 或者 :before 創(chuàng)建 1px 的邊框宙搬，然后通過 media 適配不同的設備像素比笨腥，然后調整縮放比例，從而實現(xiàn)一像素邊框
.border-bottom{
position: relative;
}
.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);
}
}
