移动端一像素问题

Posted 2020-10-05 魏耀峰

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