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

Bohdan Petruk 30.08.2021 11:55

Как правильно верстать под разные размеры экрана, если нет поэкранного дизайна? Вот есть одна картинка, и это весь дизайн.

Як на мене — це потрібно узгодити з замовником.

[...] на широких экранах это выглядит ужастно

І це теж. Мені навпаки зручніше бачити контент перед очима, а не крутити головою (звісно, якщо ваш макет дозволяє «повітря»).

Попиксельная разметка сразу отпадает, в em, rem тоже не подходит. Остаются варианты вёрстки в процентах и vw, vh — а вот как быть с минимальными размерами?

Чому rem не підходить? Вистачає з головою.

Відповісти

Підтримати

Nobody 30.08.2021 10:07

на широких экранах это выглядит ужастно.

Нет, не выглядит. Ужасно — это когда на широких экранах контент растянут на всю страницу.

Відповісти

Підтримати

Victor Musienkо Senior Engineer 28.08.2021 02:16

есть два способа: progressive enhancement и graceful degradation. Первый это мобайл-first, второй — desktop-first.
В бутстрапе можно менять ширину колонки в зависимости от медиа выражения. Также и в других цсс фреймворках.
в процентах от вьюпорта нельзя ни в коем случае, потому что выйдет херня полная. В ремах лучше все-таки.

Відповісти

Підтримати

Podoprigora Alexandr front-end developer в freelace 27.08.2021 20:01

Покажите сначала макет.

Відповісти

Підтримати

Тетяна Заєць Specialist 27.08.2021 17:45

Когда раньше что-то верстала, то только в % ибо так удобней, хз кто юзал пиксели и для чего. А какой это минимальный размер у вас?

Відповісти

Підтримати

Олексій Пєніє 28.08.2021 01:58

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

К сожалению, агент не может сообщить тебе такой инфы как реальное поле зрения человека. И верстая под процентовку экрана, есть риск на большом экране сделать невообразимо огромную дуру. Разумеется, большинство агентов способны сообщить и геометрию в сантиметрах. И вот уже исходя из лимитов поля зрения и имеет смысл городить чего ты хочешь.

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

Відповісти

Підтримати

Тетяна Заєць

Діма Кісенко 27.08.2021 11:12

Сначала на глаз сделать, показать заказчику, ему не понравится, переделать как он хочет. Академически правильно с макетом. Единицы измерения подбирать по задаче, а не идиологически

На широком экране без полей по бокам можно шею скрутить. Там отличное место для рекламы казино или фоновой картинки

Відповісти

Підтримати

Beaver Green 26.08.2021 21:10

Интересный вопрос! Несколько лет назад я бы порекомендовал семантическую верстку и адаптивный дизайн на CSS (медиа-селекторы и т.д.).
Но работая в последнее время с Реактом обнаружил что это уже не модно! Модно жабаскриптом на клиенте рассчитывать размеры на лету и прямо каждому тегу их прописывать.
Так что подожду пока кто-то иp синьор — фронтендеров объяснит что сегодня модно.

Відповісти

Підтримати

Олексій Пєніє 26.08.2021 22:08

А как жёстко это тупит и во что по оперативе вылетает — а кого волнует, да? Мода — наше всё.
Жабаскриптом конечно можно многое. Но то что творят... просто ад и израиль. При том что тот же Ютуб всё ещё не способен починить багу, когда в языках, отличных от английского, дата видео просто оказывается скрытой — а этой баге уж больше 10 лет. Конечно, можно подождать ещё столько же, может сама рассосётся из-за редизайна под 16К экраны, но что-то мне подсказывает, её просто отмасштабируют.

Відповісти

Підтримати

Beaver Green

anonymus ps 27.08.2021 20:05

Синьору на такие вещи похер, это удел джунов холиварить о том какой подход лучше

Відповісти

Підтримати

Beaver Green

Олексій Пєніє 28.08.2021 02:00

Инфа 0%. Настоящее джунство айтишников проходит годам к 70. А лычки — только для ЧСВ.

Відповісти

Підтримати

anonymus ps

anonymus ps 28.08.2021 09:49

Да, есть вечные джуниоры, нету обязаловки им быть

Відповісти

Підтримати

Олексій Пєніє

Podoprigora Alexandr front-end developer в freelace 27.08.2021 20:18

Есть компоненты где данный подход полностью оправдан, например: react-slick.neostack.com/docs/example/responsive.
В редких случаях достаточно matchMedia: developer.mozilla.org/...Web/API/Window/matchMedia.
Например когда нужно использовать другой тип компонентов для мобильных устройств (основное меню, панель фильтров): podoprigora.github.io/...twear/jackets/parka_coats.
Еще пример (логика отображения списка компаний отличается для мобильных устройств, сделать подобное с помощью только CSS в несколько раз сложнее): vabva.com/...stance/10-miles/reviews/0
В остальных же случаях используем CSS: @media, rem.

Відповісти

Підтримати

Beaver Green

Victor Musienkо Senior Engineer 28.08.2021 02:18

если ты серьезно, то это очень фиговый совет

Відповісти

Підтримати

Beaver Green

Олексій Пєніє 26.08.2021 21:00

А как правильно верстать сиденья в маршрутке под разные размеры тушки, и чтобы выгоды не упустить? Правильный ответ конечно же пусть стоя едут, но до такого додумаются ой нескоро. Так и у тебя — нет никаких «правильно». Как сделаешь — так и будет.

выглядит ужастно

Почему-то ни на секунду не сомневался, что слово именно так будет написано. Ужасть-то какая!

Відповісти

Підтримати

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

15 коментарів

Підписатись на коментарі