移动端一像素问题

本文主要是介绍移动端一像素问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近我发现移动端中的一像素会有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;
   }

    

这篇关于移动端一像素问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---