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

我有下面的汉堡菜单

<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: '';
}

汉堡曼努先生{
浮动：左；
大纲：无；
保证金：0；
填充：0；
边界：0；
光标：指针；
宽度：60px；
背景：无；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
&：悬停{
大纲：无；
}
}
汉堡曼努斯潘酒店{
光标：指针；
边界半径：1px；
高度：2倍；
宽度：24px；
保证金：0自动；
背景：黑色；
利润上限：3倍；
显示：块；
内容：''；
}

---

由于某些原因，在非视网膜屏幕上，菜单看起来非常模糊。我猜可能跨度元素靠得太近了。有人能帮忙吗？

您的边界为半像素。更改

页边距顶部：3px到偶数，如
边距顶部：4px，或停止使用
top:50%；transform:translateY（-50%）
来定位它。
虽然在视网膜屏幕上显示3px效果更好。我宁愿保留3px，
50%
可能是导致出现分数像素的原因。我需要它垂直居中