Комментарии 13
Люто бесили такие фичи на сайтах, когда был моник 2k+. Почему-то вдруг менеджеры проекта решают, что если у меня большой монитор, то я слепой и мне надо большие элементы выводить на экран.
Самое смешное что зазумить это не получалось: размеры оставались такими же даже если поставить масштаб в 50%.
Спасибо разработчикам что хотя бы не запрещают менять размеры окна браузера
Это дело вкуса. Меня, например, бесят большие боковые распорки, которые светят белым светом и выжигают глаза)
Я продемонстрировал подход, который помогает резиново масштабировать интерфейс. Причем функция адаптивности может быть любой, это настраиваемый момент. То есть если уменьшить наклон прямой, то можно масштабировать не совсем пропорционально и не так сильно. Я хочу сказать, что это можно отладить/подкрутить и сделать интерфейс адекватным на очень больших разрешениях.
Если я покупаю ноут 14 1920×1080, то я не хочу, чтобы дизайнеры его превращали в аналог 1024×768. Чем больше инфы вмещается на одном экране, тем лучше. Не надо растягивать плиточки в разы. У вас ошибка в рассуждениях «вследствие чего глазу очень тяжело остановиться на чем-то одном, а мышкой тяжело дотянуться до маленьких элементов»
Не вижу никакой ошибки. Вы можете как эталонное разрешение взять 1920х1080 и поддержать резиново только бОльшие разрешения. Для меньших экранов - не использовать данный функционал.
Когда я говорил «вследствие чего глазу очень тяжело остановиться на чем-то одном, а мышкой тяжело дотянуться до маленьких элементов», я имел ввиду действительно большие десктопные экраны 2k и больше.
Так ваш сайт выглядит на моём мониторе
Мышкой то мне дотянуться до элементов легко. Но их 4 с половиной на экране 5120х1440
Если проскроллить вниз, то и вовсе 3 карточки на весь экран
Я для примера сделал резиновость по линейной функции, никак не ограничивая эту функциональность. В продакшине, конечно, так делать не стоит. В самом простом случае, эту функциональность, надо, ограничивать через медиа-выражения, как минимум, до планшетных разрешений. Также через медиа-выражения вы можете менять наклон этой прямой на промежуточных брейкпоинтах.
Статья для примера применения резиновости. На каких разрешениях и как добавлять резиновость -- дело за вами!
Охренеть открытие сделали! Увеличение размера элементов пропорционально размерам экрана!
демка одной страницы на 13К файлов, которая ещё и просит 60+ пакетов в сисему установить - моё почтение
Так себе решение. Отлично подходит для больших теликов. Но совершенно недопустимо для дескопа, за которым люди сидят вплотную. Надо смотреть в сторону изменения функционала на широких экранах. Если уж очень хочется, то график масштабирования надо делать не под 45 градусов, а более пологим, и увеличивать масштаб только до определённых значений. А если брать в расчёт не только ширину, но и высоту экрана, то "разумно рулить" пропорциями будет несколько проще ;)
Ваш вывод никак не противоречит моим рассуждением. Наклон прямой я выбрал лишь для простоты демонстрации. И, конечно, я специально делаю акцент, что можно менять масштаб пропорционально не только прямой, но и по другим функциям тоже. Можно делать кусочно-линейную функцию, которая будет иметь разный наклон для разных брейкпоинтов. Также я отметил, что данное поведение можно сделать и для высоты экрана, если это будет необходимо.
Я лишь демонстрирую подход, который максимально поддается управлению. Можно так файнтюнить/подкручивать, что интерфейс будет смотреться адекватно на больших экранах. Для меня этот подход приятнее, чем боковые распорки. Но опять же это дело вкуса :)
Проблема
Проблемы не было. Вместо этого вы создали новую пролему, усложнив проект для разработчиков и сделав его дороже для бизнеса.
Надуманая в статье проблема решается с помощью "ctrl+" или "pinch-zoom", причём индивидуально под каждый сайт настройка сохраняется. Очень удобно.
- Явное лучше неявного.
- Хватит программировать в препроцессорах!
- Используйте пиксели везде! А em только в местах рядом с текстом, там где уместно (паддинги внутри кнопок, марджины между li-элементами, и т.д.)
Спасибо за комментарий!
Не согласен, что данный подход усложняет разработку и делает ее дороже для бизнеса, ведь использовать css-шлюзы на практике довольно просто: необходимо написать всего лишь 1 строчку в нужном месте.
Не вижу причин не использовать препроцессоры, ведь данные технологии очень удобны при разработке, а в конечном счете превращаются в css.
Не согласен с тем, что проблема выдумана, ведь я выражаю свое мнение.
Используйте пиксели, если они вам удобнее. Я считаю, использовать rem-ы/em-ы — отличный способ привязать все размеры к базовой величине, что является стандартным решением, например, для дизайн систем.
Я лишь продемонстрировал подход как сделать интерфейс по-настоящему резиновым. Использовать его или нет — решение за вами!
Спасибо за отличную статью, сам давно занимаюсь этой проблемой и пробовал различные решения. Поначалу были попытки найти универсальный вариант, но конечно же он был слишком неудобен как огромный швейцарский нож))
Ваш пример полезен, но я не использую такой прямолинейный подход так как:
1) Никто пользователю не мешает сделать зум большим или меньшим, добиваясь подобного поведения.
2) Если использовать такой подход, то все изменяется соразмерно, что неплохо для дизайна и теории, однако на практике приводит часто к неудобному интерфейсу.
Для себя пока остановился на двух вариантах, которые вкратце опишу ниже.
При работе с промо сайтами приходится учитывать не только ширину экрана, но и высоту, поэтому прибегаю обычно к шлюзам придерживаясь пары правил:
1) не делю вёрстку на мобильную и десктопную версию а только лишь на портретную и ландшафтную
2) использую шлюзы с зависимостью от vmin и vmax для создания универсальной единицы, к которой потом подвязываю остальные ключевые размеры( внутренние и внешние отступы в ем от единой единицы блока )
При работе с информационными сайтами все немного проще - две ступени шлюзов(моб и десктоп) для выведения базовой ксс переменной с ограничениями в меньших и больших пределах и потом привязка полученных значений с разными коэффициентами для интерфейса и контента( как правило).
Резиновый десктопный адаптив: как сделать большие экраны одинаковыми