От автора: сегодня мы поговорим про медиа запросы CSS. Еще в 2016 году, во время моей первой пресс-конференции (хотя это было больше похоже на своего рода экспересс-интервью) на CSSConf.Asia 2016, я сказал, что «мне просто нравится CSS». Я не лгал, CSS — это действительно мое увлечение. И в течение большей части 2017 года я «собирал» интересные макеты, с которыми сталкивался, и пытался реализовать их для Веб.
Я разработал подход (методологию? систему? концепцию? английский такой сложный язык …) для создания макетов под Веб. В отличие от многих других веб-разработчиков, на тот момент, когда я плотно занялся веб-разработкой, адаптивный веб-дизайн уже стал нормой. На самом деле, за всю свою карьеру мне только однажды пришлось создавать макет с фиксированной шириной. И из-за этого я не мыслю статично.
Когда я вижу интересный макет (обычно печатный), мой ум сразу начинает представлять, как он изменится, если изменить размер холста. Это довольно забавное упражнение, и после этого я сажусь и пытаюсь воссоздать этот макет. Это по-прежнему интересно, однако уже с сопряжено с моментами боли и разочарования (как это часто бывает в нашей работе).
Веб-дизайн ДОЛЖЕН преобразовываться
Проектирование макетов в Интернете требует интерполяционного мышления на нескольких уровнях. Веб-макеты могут и, скорее всего, должны преобразовываться по мере изменения окна просмотра. Наша задача — обеспечить, чтобы макет был максимально эффективен в пространстве, для которого он предназначен.
Во время предварительных переговоров перед моим CSS-турне по Юго-Восточной Азии я создал несколько демонстрационных макетов. Один из моих любимых основан на следующем дизайне Кийоши Стелцнера из The Yellow Issue.
Этот макет прекрасно работает в альбомной ориентации, но по мере того, как область просмотра сужается, он ломается. Однако для этого и нужны медиа-запросы, не так ли? Но вместо стандартных медиа-запросов на основе ширины окна я попробовал медиа-запросы aspect-ratio. Поскольку я задавал размеры для сетки в гибких единицах, относительные пропорции были важны.
Этот конкретный макет, включающий перекрытие, вертикальное белое пространство и преобразования, работает только в альбомной ориентации, поэтому я произвольно устанавливаю соотношение сторон 1/1, и получилось довольно хорошо. Обратите внимание, что вы должны использовать пропорциональные значения (число / число), иначе это не будет работать.
Это демо-версия более интересно смотрится в отдельном окне, поэтому по этой ссылке вы найдете автономную версию.
Единицы области просмотра могут быть сложны для использования, потому что все соотносится с областью просмотра, а не с конкретным контейнером в макете. Из-за этого могут возникать сложности при масштабировании. Это гибкие единицы, и они хорошо работают с медиа-запросами aspect-ratio в ситуациях, когда нам нужно сохранить пропорции.
Deutsche Gitter
Скорее всего, это просто совпадение, но макеты, которые привлекают мое внимание, чаще всего я нахожу в немецких изданиях. А ведь сеточный дизайн Swiss Style зародился в Германии, Нидерландах и России в 1920-х годах. Во всяком случае, Йозеф Мюллер-Брокманн и Карл Герстнер издавались в основном на немецком языке (мне так кажется).
Да и Дитер Рамс является исконным немцем, а его работа для Braun довольно знаковая, ИМХО. Поэтому, когда я увидел два рекламных постера Braun HiFi, созданные Вольфгангом Шмиттелем, я понял, что просто обязан переделать их под Веб.
Я настоятельно рекомендую просмотреть их на отдельной странице на 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 проявляется при использовании их вместе.
Конечно, построения макета в Веб обычно начинается с использования свойства display. Но мы определенно используем целый набор свойств, которых даже больше, чем игроков в баскетбольной команде. Я называю показанную на рисунке выше структуру, Командный макет, и это еще не полный список свойств, связанных с построением макета.
Заключение
Таким образом, я рассказал вам немного про CSS и отвлекся от повседневных дел. Станет ли это серией статей? Например, чем-то типа «Давайте переделаем это под Веб»? Кто знает…
Автор: Chen Hui Jing
Источник: //www.chenhuijing.com/
Редакция: Команда webformyself.
