小程序在各个地方都是比较坑的,就拿一像素边框来说,ios显示正常,安卓手机显示大概2像素宽,维护一个小程序时发现祖传的代码是用一像素的图片代替的边框,遂记录一下兼容安卓一像素边框问题的办法。
伪元素:before | :after
/* 给class为myBox的view添加一个下边框 */
.myBox{
width: 400rpx;
height: 400rpx;
position: relative;
}
.myBox:after{
content: '';
width: 100%;
height: 2rpx;
position: absolute;
bottom: 0;
left: 0;
transform: scaleY(0.5);
}
/* 伪元素的content为必写项,当添加竖向边框时transform的属性值scaleY缩放需要改成scaleX */
本文介绍了在微信小程序中遇到的一像素边框在安卓设备上显示过粗的问题,通过对比iOS和安卓的表现,指出了一种常见的解决方案——使用伪元素:before | :after进行边框的绘制,以实现兼容性的优化。

558

被折叠的 条评论
为什么被折叠?



