# 怎么绘制出0.5px的线条

# scale方法

<style>
.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
}
</style>
  <p>1px + scaleY(0.5)</p>
  <div class="hr scale-half"></div>
1
2
3
4
5
6
7
8

# viewport

利用动态的改变<viewport>让网页的像素区域和屏幕的像素区域重合,这样就很轻松的去写1px的边框,并且它会等于屏幕本身的1px。

/当 devicePixelRatio = 2 输出:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//当 devicePixelRatio = 3 输出:

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
1
2
3
4
5
6
7

# svg+background

svg 单独是这样:

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
    <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>
1
2
3

设置 background 为svg文件:

<style>
.line.svg {
    height: 1px;
    background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
}
</style>
<p>svg+background</p>
<div class="line svg"></div>
1
2
3
4
5
6
7
8