Как верстать под 4к и выше?

Question

[Айнур Ярулин]

Здравствуйте, вообщем верстаю сайт только с единицей vmin и как-то сложновато делать,
чтобы сайт выглядел красиво при любом соотношении сторон и мне кажется, что зря я так.

Сейчас мой сайт одинаково выглядит и на 1600x900 и на 9000x5000 разрешении,
хоть такого и не существует, но стоит ли так делать в моих будущих проектах? Или владельцы
крутых мониторов могут просто увеличить масштаб страницы в браузере и у них всё будет красиво?

Какие вообще проблемы могут быть с vmin, почему их так мало используют?

Comments

[Froggyweb]

кроме геммороя тебе это ничего не даст. масштабированием интерфейсов занимается система, никто из пользователей не масштабирует браузер, кроме твоих случаев.
например iphone12 несмотря на разрешение физическое отдает макет на 320 или 420 px сейчас не помню.
картинки можно отдавать более детализированными, но нужно помнить о объемах данных. из стандартных уже есть ретина x2, х3. т.е. картинка у тебя будет весить на порядки больше. оно надо?

[Айнур Ярулин]

Froggyweb, то есть если телефон будет 4к, то у него всё равно будут стили медиазапроса на 320px?
я вот как раз из-за этого переживал, помоту что с vmin у меня всё мелко выглядит на телефонах.

[Айнур Ярулин]

Froggyweb, стоп, а для 4к мониторов тоже автоматически отдаёт макет как при разрешении 1920x1080 например?

[Froggyweb]

squadbrodyaga, да принцип такой. если у устройства 10000000 пикселей на дюйм оно должно системе давать адекватное масштабирование. это не всегда срабатывает для неадекватных решений, но это норм например на моем бюджетном мониторе интерфейс фотошопа крупнее чем на на соседнем нек, хотя диагонали там 22 и 23 " но это норм. все гармонично. пикселы в вебе это скорее к сантиметрам из-за поддержки всех устройств и новых и старых. так что ориентируйся на стандартные разрешения 1920 - это 24 дюйма к примеру. 9000 - это экран метра 3.

вот чуть подробней https://wayup.in/blog/dpi-and-ppi-in-web-design-an...

[Ankhena]

squadbrodyaga, https://www.esolutions.se/en/test открывайте на реальных устройствах и смотрите. На дестопах смотрите что будет при масштабировании в браузере, при масштабировании в системе и т.д.

Answer 1

[xmoonlight]

Для 4K нужно использовать изображения высокого разрешения, шрифты и отступы должны адаптивно сайзиться так, чтобы не портить удобство UI/UX.
Всё это делается либо через отношения размеров (calc() и дроби: пример), либо проценты высчитываются при формировании таблицы стилей и "жёстко" прописываются при создании вёрстки (создаётся фиксированная сетка разрешений экрана).

Comments

[Айнур Ярулин]

xmoonlight, ну пока что у меня всё нормально сайзиться, получается я всё делаю правильно.

[xmoonlight]

squadbrodyaga,

ну пока что у меня всё нормально сайзиться, получается я всё делаю правильно.

и

помоту что с vmin у меня всё мелко выглядит на телефонах.

я не понял: нормально всё сайзится или нет?)

[Айнур Ярулин]

xmoonlight, ну на телефонах мелковато, а на компах нормально.

[xmoonlight]

squadbrodyaga, ну вот и докручивай отношения так, чтобы везде нормально было.
Это реально сделать, я делал лично меню с кнопками-квадратами, чтобы иконки и надписи везде (на разных разрешениях) читались без проблем.