移动端1px问题的解决

一，原理

实际上是利用伪元素，创建一个容器，设备像素比是多少就设置为多大的。然后边框设置为1px，再将这整个伪元素的大小缩放设备像素比倍。这样就得到合适的1px。

二，代码实现

/*手机端实现真正的一像素边框*/ .border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px { 
    position: relative; } /*线条颜色 黑色*/ .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after { 
    background-color: #eeeeee; } /*底边边框一像素*/ .border-bottom-1px::after { 
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; transform-origin: 0 0; } /*上边边框一像素*/ .border-top-1px::after { 
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform-origin: 0 0; } /*左边边框一像素*/ .border-left-1px::after { 
    content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; transform-origin: 0 0; } /*右边边框1像素*/ .border-right-1px::after { 
    content: ""; box-sizing: border-box; position: absolute; right: 0; top: 0; width: 1px; height: 100%; transform-origin: 0 0; } /*边框一像素*/ .border-1px::after { 
    content: ""; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #eeeeee; } /*设备像素比*/ /*显示屏最小dpr为2*/ @media (-webkit-min-device-pixel-ratio: 2) { 
    .border-bottom-1px::after, .border-top-1px::after { 
    transform: scaleY(0.5); } .border-left-1px::after, .border-right-1px::after { 
    transform: scaleX(0.5); } .border-1px::after { 
    width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; } } /*设备像素比*/ @media (-webkit-min-device-pixel-ratio: 3) { 
    .border-bottom-1px::after, .border-top-1px::after { 
    transform: scaleY(0.333); } .border-left-1px::after, .border-right-1px::after { 
    transform: scaleX(0.333); } .border-1px::after { 
    width: 300%; height: 300%; transform: scale(0.333); transform-origin: 0 0; pointer-events: none; } } 

然后需要1px边框的地方：

 <div class="img-box border-1px"> <span :class="[item1.imageRef, 'item-image']"></span> </div> 

而对于有圆角的，基于我们的原理，圆角应该对应放大几倍，这样缩小回去之后才能一致，比如说圆角26px的时候，就需要：

/*设备像素比*/ /*显示屏最小dpr为2*/ @media (-webkit-min-device-pixel-ratio: 2) { 
    .border-1px::after { 
    border-radius: 52px; } } /*设备像素比*/ @media (-webkit-min-device-pixel-ratio: 3) { 
    .border-1px::after { 
    border-radius: 78px; } } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/10994.html