В определенных ситуациях HTML-элементы, использующие пиксели, не всегда отображаются так, как они есть, простой пример - когда человек настраивает масштабирование браузера примерно до «100%», поэтому в зависимости от положения и масштабирования один элемент высоты равендругим кажется меньший пиксель.
Одним из примеров является само меню сайта StackOverflow, например, с увеличением "175%":
Обратите внимание, что третья строка меню кажется больше, чем другие, и что расстояние между первой и второй полосами также кажется больше.
Это не просто "масштабирование", я тестировалэто на записной книжке коллеги с Windows10 и картой GeForce® GTX 1050 (конечно, я понимаю, что частично современные компьютеры визуализируются с «интегрированной картой» ), и он использует в настройках дисплея Windows для операционной системы все значение 125%:
Используя это, я понял, что такая же проблема возникает (даже при увеличении на 100% вчелоser).
Единственные дисплеи, на которых я заметил, что проблема не возникает, - это дисплеи сетчатки (и подобные «технологии»), потому что они используют более высокую «плотность пикселей».
Но вопрос в NOT о мониторах, дисплеях и рыночных технологиях, вопрос в том, как избежать проблемы на обычных экранах, когда пользователь что-то настраивает (например, в Windows10 с 125% на настройках дисплея), отмечая, чтоон зависит от разрешения и даже монитора и является «непредсказуемым».
Я пытался работать с другими единицами измерения (em, pt, rem, %), но проблема осталась.
Итак, вот мой вопрос:
- Как предотвратить искажение пиксельного рендеринга на элементах в настройках дисплея, которые могут отличаться?
Пример возникновения проблемы (шанс настроить источник «ОС» или увеличение):
*, ::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>
Примечание: Я также заметил, что работа с svg (зависит от того, как вы его используете)или icon-fonts работает намного лучше по сравнению с html + css , но я пытаюсь решить проблемы с простыми "элементами html".