Почему при 125% масштабе на ноутбуке не ровные радио?

Question

[luxurypluxury]

Созрел такой вопрос, почему на ноутбуке при масштабе экрана становится не центрированный чекед в чекбокса?

Браузер Opera GX, на пк все нормально.

Вот что происходит:


Вот так на пк:


Соурс

Comments

[Lynn «Кофеман»]

А если на ПК 125% выставить?
Иди на ноутбуке 100%?

Точно ли проблема именно в масштабе, а не в каких-то других отличиях?

[holllop]

Обычно для того чтобы интерфейс и/или текст, сохраняли свою красоту(стили) прописывают несколько стилей под разный размер экрана. То есть, у вас сейчас происходит следующие экран стал меньше, остальное должно было просто стать польше не долны были исчезать знаки посредине выражения, прочитайте про адаптивный дизайн, или переформулируйте вопрос более корректно.

[Одиночка Айс]

Возможно еще размеры нечетные, при масштабировании 1 пиксель может всю картину сломать

[Ankhena]

Масштаб экрана или масштаб в браузере?
Масштаб экрана не должен бы давать такого эффекта.

Но ответ на вопрос почему: это потому что не делится нацело.

p.s. jsfiddle не работает в России, переложите на codepen.io

[luxurypluxury]

holllop, так причём то что при одинаковом разрешении экрана но с разным масштабом меняется картина?

[luxurypluxury]

luxurypluxury, элемент как был 24пкс так и останется

[holllop]

luxurypluxury, а ты подумай что будет с картинкой если ты на неё через увеличительное стекло посмотришь )

[holllop]

luxurypluxury, ну правильно ) ты увеличивая масштаб ты не увеличиваешь тем самым количество пикселей или в чём там вычисления ведёшь. Реально лучшая аналогия это увеличительное стекло. Если ты хочешь проверить как вёрстка будет седеть на других экранах, то используй инструменты разработчика они есть в любом браузере (например в Chrome они появляются после нажатия на клавишу F12). А так ты одеваешь очки с увеличительными стёклами (увеличиваешь масштаб) и спрашиваешь: "а почему всё стало больше?".

[holllop]

luxurypluxury, хорошо вот тебе пример это мой аватар и подпись к нему при 100% масштабе, а вот при 125% . А чтобы было ещё полее явно, я их на прямую сравнил

[holllop]

holllop, а де картинки?)

Answer 1

[Александр]

Почему в css несуществующий класс используется?

._budget__item {
    display: flex;
    align-items: center;
}

Полагаю, что если уберешь _ вначале, поведение будет ожидаемое.
По разнице отображения, на разных версиях браузеров с разным разрешением дефолтное отображение может отличаться