问题
css最低只支持1px大小,不足1px就以1px显示,所以在移动端,根据UI设计稿,适配各种屏幕分辨率时,宽高在这个峰值时,就会出现实际结果比设计稿要粗的感觉。
常体现为:多倍的设计图设计了1px的边框,在手机上缩小呈现时,由于css最低只支持显示1px大小,导致边框太粗的效果。
解决方案
通过transform: scale()缩放
单边
如:下边框
.div::after {
content: '';
box-sizing: border-box;
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
border-bottom: 1px solid #bfbfbf;
transform: scaleY(1/2);
transform-origin: left bottom;
}
如果还需要添加其他边框,可以用before伪元素再加,如再加个右边框:
.div::before {
content: '';
box-sizing: border-box;
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
width: 2px;
height: 100%;
border-right: 1px solid #bfbfbf;
transform: scaleX(1/2);
transform-origin: right bottom;
}
所有边
此种方式可以添加边框圆角:
.div::after {
content: '';
box-sizing: border-box;
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 300%;
height: 300%;
border: 1.5px solid #bfbfbf;
transform: scale(1/1.5/2);
transform-origin: left top;
border-radius: 6px;
}
注意点
- 要先给目标div元素添加非static的position属性,因为以上方法都是利用伪元素定位实现
- 具体的scale缩放比例取决于你是几倍设计图尺寸下的1px,例如二倍图(750px)尺寸下,缩放比例就是1/2(敲黑板:scale缩放比例和dpr无关)
- 网上的常规代码会有个别安卓机型边框不显示的问题,我自己的代码已经做了各种兼容处理:单边方案就给伪元素1px的内容区域高度或宽度,加上边框就是2px;所有边的话就基于1.5px边框宽度来进行缩放。