Практическое использование в CSS медиа-запросов aspect-ratio

Практическое использование в CSS медиа-запросов aspect-ratio

От автора: сегодня мы поговорим про медиа запросы CSS. Еще в 2016 году, во время моей первой пресс-конференции (хотя это было больше похоже на своего рода экспересс-интервью) на CSSConf.Asia 2016, я сказал, что «мне просто нравится CSS». Я не лгал, CSS — это действительно мое увлечение. И в течение большей части 2017 года я «собирал» интересные макеты, с которыми сталкивался, и пытался реализовать их для Веб.

Я разработал подход (методологию? систему? концепцию? английский такой сложный язык …) для создания макетов под Веб. В отличие от многих других веб-разработчиков, на тот момент, когда я плотно занялся веб-разработкой, адаптивный веб-дизайн уже стал нормой. На самом деле, за всю свою карьеру мне только однажды пришлось создавать макет с фиксированной шириной. И из-за этого я не мыслю статично.

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

Веб-дизайн ДОЛЖЕН преобразовываться

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

Во время предварительных переговоров перед моим CSS-турне по Юго-Восточной Азии я создал несколько демонстрационных макетов. Один из моих любимых основан на следующем дизайне Кийоши Стелцнера из The Yellow Issue.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практическое использование в CSS медиа-запросов aspect-ratio

Этот макет прекрасно работает в альбомной ориентации, но по мере того, как область просмотра сужается, он ломается. Однако для этого и нужны медиа-запросы, не так ли? Но вместо стандартных медиа-запросов на основе ширины окна я попробовал медиа-запросы aspect-ratio. Поскольку я задавал размеры для сетки в гибких единицах, относительные пропорции были важны.

Этот конкретный макет, включающий перекрытие, вертикальное белое пространство и преобразования, работает только в альбомной ориентации, поэтому я произвольно устанавливаю соотношение сторон 1/1, и получилось довольно хорошо. Обратите внимание, что вы должны использовать пропорциональные значения (число / число), иначе это не будет работать.

Это демо-версия более интересно смотрится в отдельном окне, поэтому по этой ссылке вы найдете автономную версию.

Единицы области просмотра могут быть сложны для использования, потому что все соотносится с областью просмотра, а не с конкретным контейнером в макете. Из-за этого могут возникать сложности при масштабировании. Это гибкие единицы, и они хорошо работают с медиа-запросами aspect-ratio в ситуациях, когда нам нужно сохранить пропорции.

Deutsche Gitter

Скорее всего, это просто совпадение, но макеты, которые привлекают мое внимание, чаще всего я нахожу в немецких изданиях. А ведь сеточный дизайн Swiss Style зародился в Германии, Нидерландах и России в 1920-х годах. Во всяком случае, Йозеф Мюллер-Брокманн и Карл Герстнер издавались в основном на немецком языке (мне так кажется).

Да и Дитер Рамс является исконным немцем, а его работа для Braun довольно знаковая, ИМХО. Поэтому, когда я увидел два рекламных постера Braun HiFi, созданные Вольфгангом Шмиттелем, я понял, что просто обязан переделать их под Веб.

Практическое использование в CSS медиа-запросов aspect-ratio

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практическое использование в CSS медиа-запросов aspect-ratio

Я настоятельно рекомендую просмотреть их на отдельной странице на CodePen. Общепризнано, что существует несколько определяющих переходных точек, для которых нужно разрабатывать отдельные структуры, но я исхожу из того, что когда дизайн просматривается в окне с конкретным соотношением сторон, сетка перестраивается через изменение свойства grid-template-areas.

Для элементов сетки назначается соответствующая им область сетки, которая может применяться независимо от используемого макета. Я считаю, что этот подход действительно удобен и реализуется гораздо меньшим количеством кода, чем, если бы мы вручную размещали элементы с помощью свойств grid-row и grid-column для медиа-запросов.

OMG, object-fit

Я хочу немного рассказать о том, насколько хорошо это «дополнительное» свойство CSS работает с сеточными макетами CSS? Это фоновые изображения, но для контента, представляющего собой изображения. Поддержка его вполне удовлетворительная. И да, мы все уже давно поняли, что в Internet Explorer никогда не будут введены никакие новые функции. Поэтому просто отбросьте все семейство IE из макета — это компромисс, который я считаю приемлемым. Но, как видите, похоже, даже Opera Mini поддерживает object-fit!

С помощью object-fit я могу заставить изображения заполнить все пространство сетки, на которое они были определены, чтобы макет выстраивался в линию независимо от того, как я изменяю область просмотра. Не будет неприятных белых областей, которые изображение не заполняет должным образом.

CSS — это командный спорт

Это моя новая любимая цитата. Я пришел к выводу, что CSS в конечном итоге является комплексной технологией. Хотя вы можете использовать свойства отдельно, вся мощь CSS проявляется при использовании их вместе.

Практическое использование в CSS медиа-запросов aspect-ratio

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

Заключение

Таким образом, я рассказал вам немного про CSS и отвлекся от повседневных дел. Станет ли это серией статей? Например, чем-то типа «Давайте переделаем это под Веб»? Кто знает…

Автор: Chen Hui Jing

Источник: https://www.chenhuijing.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree