3

在某些情况下，使用像素的 html 元素并不总是像想象的那样呈现，一个简单的例子是当一个人将浏览器缩放调整到大约“100%”时，因此根据位置和缩放一个高度等于另一个元素的元素似乎是一个较小的像素。

一个示例是 StackOverflow 站点菜单本身，例如“175%”缩放：

视频在您缩放时会影响像素，例如 175% 浏览器缩放

请注意，第三个菜单栏看起来比其他菜单栏大，并且第一个和第二个菜单栏的间距也显得更大。

这不仅仅是关于“缩放”，我在同事的笔记本电脑上用 Windows10 和GeForce® GTX 1050卡进行了测试（当然我知道现代计算机部分使用“集成卡”渲染）并且它用于操作系统的Windows 显示设置全部值为 125%：

windows 10 设置为使用 125% 的字体大小

使用它，我意识到会发生同样的问题（即使在浏览器中放大 100%）。

我注意到没有出现问题的唯一显示器是视网膜显示器（和类似的“技术”），因为它们使用更高的“像素密度”。

但问题不在于显示器、显示器和市场技术，问题是当用户调整某些东西时如何避免在正常屏幕上出现问题（例如在 Windows10 中显示设置为 125%），并指出它随分辨率甚至监视器并且是“不可预测的”。

我尝试使用其他度量单位（em, pt, rem, %），但问题仍然存在。

所以这是我的问题：

  • 如何防止元素上的像素渲染在可能不同的显示设置中失真？

发生问题的示例（机会调整“OS”或缩放的来源）：

*, ::after, ::before {
    box-sizing: border-box;
}

body {
    background-color: #007bff;
}

.v-navbar-toggle {
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    display: inline-block;
    background: none;
    outline: 0;
    border: none;
    padding: 10px 8px;
    color: #fff;
    margin: 0;
}

.v-icon-bar {
    background-color: currentColor;
    overflow: hidden;
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
}

.v-icon-bar+.v-icon-bar {
    margin-top: 4px;
}
<button class="v-navbar-toggle">
    <i class="v-icon-bar"></i>
    <i class="v-icon-bar"></i>
    <i class="v-icon-bar"></i>
</button>

注意：我还注意到使用（取决于您如何使用它）或 + 相比效果更好，但我要解决的是简单的“html元素”问题。

4

0 回答 0