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

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

И нужно сверстать под все разрешения. В boostrap элемент контейнер (container ) имеет ограниченную максимальную ширину, по бокам оставляет «воздух», на широких экранах это выглядит ужастно.

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

Подскажите варианты и хотелось бы пример академически правильной разметки.

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Как правильно верстать под разные размеры экрана, если нет поэкранного дизайна? Вот есть одна картинка, и это весь дизайн.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть компоненты где данный подход полностью оправдан, например: 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.

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

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

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

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

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