Как правильно задавать размеры в CSS для экранов с большим DPI?

Question

[gvozd1989]

Здравствуйте.
Верстаю макет, отрисованный с шириной 1920px. На ноутбуке клиента (1920x1080) под Windows 10 выставлен масштаб 125%, и у него все шрифты и элементы с заданными в px размерами, выглядят крупнее, чем на макете.
Подскажите, пожалуйста, как правильно обработать такую ситуацию? Как сделать, чтобы и на других экранах было нормально (150%, 175%, Apple Retina)?

Comments

[Rustam Bainazarov]

Крупнее, потому что у него viewport больше. CSS-пиксели ≠ физические. Вы же делали адаптивность, правильно? При вёрстке для вас не должно быть никакой разницы, есть масштабирование, нет ли, есть ли Retina (то же масштабирование) или нет.

Как правильно работать с PSD макетами под ретиной?

[gvozd1989]

Рустам Байназаров, Адаптивность да, но у меня, допустим для 1920 размер шрифта 18px, а у клиента на ноутбуке он выглядит крупнее, чем на макете, так как в системе у него (даже не в браузере) стоит скейлинг 125%.

[Rustam Bainazarov]

gvozd1989, ну так значит это его решение. Скейлинг ОС прямо влияет на то, какое viewport будет у браузера. При заданных параметрах у него viewport примерно равен 1440 пикселям.

Более того, до сих самые популярные десктопные разрешения — 1360 и 1440 пикселей (без учёта полосы прокрутки). Делать основной макет, ориентируясь на 1920, — опрометчиво.

Более того, я вам скажу, что настройки масштабирования ОС у большинства относительно современных и, считайте, всех современных ноутбуков на Windows с экраном FullHD из коробки как раз 125%.

[Алекс Глебов]

gvozd1989,
Тут можно узнать разрешение экрана браузера myresolutionis.ru
Если у него экран на ноуте 1920, то с учетом масштаба там будет 1536. То есть он смотрит адаптивный вариант.

[gvozd1989]

Рустам Байназаров, screen.width у него показывает 1536px. Правильно я понимаю, что нужно сделать медиа-запрос (min-width: 1440px) и пересчитать все размеры с уменьшением?

И под какие разрешения вы советуете вообще отрисовывать макеты?

[Rustam Bainazarov]

gvozd1989, советую, что бы весь контент вмещался в максимум 1340px, а так вообще в 1200px. Всё зависит от дизайна и задачи. Посмотрите, как сделаны популярные сайты.

[gvozd1989]

Алекс Глебов, Рустам Байназаров, спасибо!

Answer 1

[Антон Шаманов]

размер шрифта задается в em/rem