Линии гамбургера не одинаковой толщины на разных устройствах ⇐ CSS

[Anonymous]

Я создаю веб-сайт начальной загрузки 5 и добавляю анимированный переключатель навигации № 02 по этой ссылке: https://codepen.io/taqumo/pen/jOEyrBb:
CSS для высоты строки гамбургера:

Код: Выделить всё

 .btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 22px;
height: 2px !important;
margin:6px auto!important;
content: '';
background-color: var(--light);
border-radius: 4px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;

}
Одна из проблем, которую я обнаружил, заключается в том, что высота промежуточных линий, используемых для создания гамбургер-меню, имеет тенденцию меняться и может быть неравномерной. на некоторых мобильных устройствах, например: https://forum.bricksbuilder.io/t/solved ... kness/5221. Я пробовал разные значения высоты строки, например px, em или rem, но это не помогло. Кто-нибудь нашел обходной путь для этой очень распространенной, но сложной проблемы с разрешением? Я не хочу использовать изображение из-за анимации.

Подробнее здесь: https://stackoverflow.com/questions/792 ... nt-devices