理论上1px已经是最小单位了,那如何画一条0.5px的线呢
解决办法:
1.移动端,使用meta viewport 的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
要记得viewport只针对于移动端,只在移动端上才能看到效果,缩放到原来的0.5倍,如果是1px那么就会变成0.5px
2.采用transform: scale()的方式
<style>
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
}
</style>
<p>1px + scaleY(0.5)</p>
<div class="hr scale-half"></div>