参考自vue的移动端ui库vux
核心内容如下
.setLine(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 200%;
border: 1px solid @c;
color: @c;
height: 200%;
transform-origin: left top;
transform: scale(0.5);
}
.vux-1px {
&:before {
.setLine();
}
}
我的理解
- 利用绝对定位,摆脱的宿主元素display属性的依赖,可以做到刚刚好的包裹住当前元素(
width:100%
恰好是元素的panding-box的宽度)。 - 绝对定位不影响宿主元素的大小,对于文本内容的宿主元素可以直接将行高设置为border-box的高度,而不需要考虑边框的影响。
- 将边框宽高设为正常值的2倍,再进行缩放,使得在支持0.5px的设备上显示更细腻的边框宽度。值得注意的是
transform-origin: left top
也是保证包裹宿主元素的关键。