汉堡包菜单在非视网膜屏幕上看起来很模糊？

Question

我有以下汉堡菜单

<div class="hamburgerMenu">
<span></span>
<span></span>
<span></span>
</div>

.hamburgerMenu {
  float: left;
  outline: none;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  width: 60px;
  background: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  &:hover {
      outline: none;
  }
}
.hamburgerMenu span {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 24px;
  margin: 0 auto;
  background: black;
  margin-top: 3px;
  display: block;
  content: '';
}

出于某种原因，在非视网膜屏幕上，菜单看起来非常模糊。我猜测也许span元素太靠近了。有人可以帮忙吗？

Answer 1

你的边界是半像素。将margin-top: 3px;更改为margin-top: 4px;之类的偶数，或停止使用top: 50%; transform: translateY(-50%)进行定位。