Нельзя отрицать влияние адаптивных подходов в наших усилиях по разработке и внедрению. То, что когда-то было новым и неизвестным, теперь является принятым стандартом. Когда я пошел по пути понимания влияния адаптивного веб-дизайна, мне было легко узнать, как сделать что-то с медиа-запросами, но мне было труднее понять, почему я должен делать это определенным образом. Эта статья является попыткой исправить эту ситуацию.
Мое намерение состоит в том, чтобы это послужило полезным введением для тех из вас, кто пытается понять масштабные последствия подхода «сначала на мобильных устройствах», и для тех, кто более опытен с этим подходом, он может послужить хорошим напоминанием.
Я сосредоточусь на деталях написания мобильных медиа-запросов, и это также будет включать в себя, почему мы должны сделать это и в завершение с рекомендациями для начала. Однако сначала мы должны взглянуть на некоторые важные различия во фразе «сначала мобильный».
Оттенки Mobile-First
В нашем обсуждении важно различать, что «сначала мобильный» имеет два разных смысла. Некоторые могут счесть это ненужным, но для руководства, которым я поделюсь в конце статьи, это важно.
Многие знакомы с философским подходом, предложенным Люком Вроблевским в его книге « Mobile First» . Люк пишет о конструктивных преимуществах стратегии «сначала для мобильных устройств», наибольшее влияние на которую оказывают навязанные ограничения мобильных устройств, которые заставляют нас сосредоточиться на самом главном. Он также рассказывает о том, как мобильные устройства обладают возможностями, которые позволяют нам улучшить впечатления (например, GPS, акселерометр и т. Д.). Это то, что я буду называть мобильным дизайном .
Тем не менее, это не единственный смысл, и эта статья будет сосредоточена на втором смысле. Второй смысл, который я буду называть реализацией для мобильных устройств . Здесь используются технические принципы адаптивного дизайна, предложенные Итаном Маркоттом. Это означает, что когда мы на самом деле реализуем интерфейс (прототип или производство), мы начинаем проектировать с наименьшим возможным окном просмотра (которое мы будем называть «мобильным окном просмотра», но когда-нибудь это может быть «просмотр окна просмотра» как наименьшего), и мы затем постепенно добавляйте стили и иногда другие улучшения по мере увеличения области просмотра.
Давайте теперь посмотрим, как и преимущества медийных запросов для мобильных устройств.
Создание мобильных медиа-запросов
Вместо того, чтобы объяснять все входы и выходы медиазапросов в этом разделе, я хочу сосредоточиться конкретно на том, как технически выполняется техника. Давайте рассмотрим два разных медиазапроса и рассмотрим их реализацию. Обратите внимание, что я придерживаюсь этого простого, чтобы избежать какой-либо определенной структуры или стиля именования классов.
.sidebar {
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
@media (max-width: 40em) {
.sidebar, .content {
float: none;
width: auto;
}
}Вы можете увидеть этот простой пример на работе в этой демонстрации CodePen . Измените размер окна, чтобы увидеть изменение.
В этом примере у меня есть два элемента, которые используют поплавки, так что они выровнены горизонтально, и у меня есть процентная ширина на обоих из них. Затем у меня есть точка останова медиа-запроса, где поплавки отключены, а ширина восстанавливается до полной ширины с помощью значения «auto».
Какие проблемы с этим подходом?
- Это заставляет нас «отменять» стили с помощью наших медиа-запросов. Это не эффективный подход к управлению вашими стилями, но мы должны вместо этого добавлять стили.
- Наши оригинальные стили float идут вразрез с естественным потоком элементов HTML. Блочные элементы естественным образом очищаются сверху и снизу и растекаются на 100%, поэтому стили «отмены» просто декларируют, что элементы уже делают естественным образом.
- Это не позволяет нам принять те же ограничения, которые мы, возможно, использовали в нашем дизайне для мобильных устройств. По сути, мы идем в двух разных философских направлениях.
Обычно вы можете определить реализации, которые начинаются с больших окон просмотра и снижаются по наличию «max-width» в медиазапросах. Это не всегда так, но обычно это довольно сильный показатель. Теперь давайте посмотрим на другой пример:
@media (min-width: 40em) {
.sidebar {
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
}
Теперь давайте посмотрим на преимущества этой модели, которые на самом деле противоположны проблемам, с которыми мы начали выше (демонстрация этого также на CodePen ).
- Вместо того, чтобы удалять поплавки, когда мы спускаемся, нам нужно добавлять поплавки только тогда, когда они нам нужны. Это уменьшает много ненужных CSS.
- В этом случае мы берем то, что HTML дает нам по умолчанию, и не идем против этого без необходимости. По умолчанию браузеры дают нам то, что нам нужно и нужно, в меньшем окне просмотра, поэтому мы используем эти значения по умолчанию (т. Е. Для блоков установлены значения
width: auto - Используя этот метод, мы философски находимся на той же странице нашего дизайна для мобильных устройств.
Упорядочение источников: более сложный пример
Приведенный выше пример очень прост и нарочит, но давайте рассмотрим более сложный пример. Одной из первых вещей, о которых вы узнаете и с которыми придется столкнуться, является проблема упорядочения DOM-источников.
Порядок источников относится к тому, как документ отображается в результате структуры DOM. DOM выполняет рендеринг сверху вниз, и до появления flexbox у нас не было чистого CSS-метода для отделения рендеринга от исходного порядка. Несмотря на то, что flexbox увлекателен, мы никогда не уйдем от рассмотрения порядка исходного кода, поскольку создаем адаптивные интерфейсы.
В этом третьем примере CodePen вы можете видеть приоритет, выделенный слева направо.
Порядок исходных текстов — очень важная концепция, которую нужно понимать при переходе к адаптивному веб-дизайну. Из приведенного выше примера вы можете видеть, когда область просмотра падает ниже 40em, самый важный контент (помеченный как «первый приоритет») находится сверху. Это то, чего мы хотим добиться, учитывая важность ограниченного пространства в маленьких окнах просмотра.
Теперь вы можете получить нечто подобное в настольной реализации, но я видел, как люди впадают в старые тенденции не думать в первую очередь о важности упорядочения источников. Мобильный дизайн и реализация делают его неизбежной реальностью, и когда они соединены вместе, результатом является мощное решение. Затем такие технологии, как flexbox, могут быть использованы в качестве усовершенствования, если необходимо изменить порядок рендеринга.
Пара больше преимуществ
Приведенный выше код для мобильных устройств — отличный пример ответственной реализации с помощью прогрессивного улучшения. Важно отметить, что все еще существуют старые мобильные браузеры, которые не поддерживают медиазапросы, и полезно, чтобы они получали меньший макет области просмотра. Есть другие браузеры, которые имеют проблемы с медиа-запросами, особенно IE8 и ниже. Вы можете заполнить медиазапросы или использовать препроцессорное решение .
Внедрение Mobile-First более эффективно и ориентировано на будущее ( Image credit )
Есть еще одно важное преимущество, которое позволяет структурировать наши медиазапросы, а именно производительность. Тим Кадлек провел исследование, чтобы показать, что использование медиазапросов таким образом позволяет избежать ненужных загрузок. Так, например, если вы хотите добавить фоновое изображение только в больших окнах просмотра или даже поменять местами меньшее изображение, вы экономите время загрузки и загрузки. Если бы я добавил изображение на боковую панель в приведенном выше примере, оно загрузилось бы и отобразилось только тогда, когда область просмотра достигнет как минимум 40em.
Управляйте своими медиазапросами с помощью Sass
Прежде чем закончить, я рекомендую вам использовать препроцессор для управления медиазапросами. Существует множество опций и даже синтаксис препроцессора для обработки этого (Sass, Less, Stylus). Я предпочитаю более простой подход, и Крис Койер продемонстрировал миксин Sass, который я использую в своих проектах. Я обновлю его, чтобы использовать мой предпочитаемый язык.
@mixin mquery($size) {
if $size == small {
@media (min-width: 30em) {
@content;
}
}
else if $size == medium {
@media (min-width: 40em) {
@content;
}
}
}
Тогда мы можем сослаться на это так.
.sidebar, .content {
@include mquery(medium) {
float: left;
}
}
Это здорово, потому что мы можем централизованно контролировать значения наших медиа-запросов, и мы всегда можем видеть, как наши элементы меняются во всех наших медиа-запросах. Раньше меня беспокоило, что мой скомпилированный вывод CSS содержал повторяющийся синтаксис медиазапросов, но с минификацией и GZIP это небольшое увеличение. Если это действительно беспокоит вас и вы используете Grunt, то Grunt может объединить ваши медиа-запросы после обработки Sass .
Вывод
Когда вы будете готовы углубиться в чтение и учебу, начните с « 7 навыков высокоэффективных медиа-запросов» , замечательного поста Брэда Фроста.
Эта статья должна была стать кратким руководством по определениям, подходам и преимуществам использования медиазапросов для мобильных устройств. Я желаю вам всего наилучшего, поскольку вы продолжаете расти и применять эти новые и интересные подходы, которые помогают лучше обслуживать наших клиентов и заказчиков.