Как использовать медиазапросы в адаптивном веб-дизайне
- Медиа-запросы для вызова стилей
- Вызов с использованием внешней таблицы стилей или таблицы стилей
- Запросы элементов еще не поддерживаются
- Начало работы с медиа-запросами
- Добавление запросов для разных видовых экранов
- Работа с изображениями
- Другие медиа запросы
- Береги себя с производительностью
Кредит фотографии: Джереми Кит , Creative Commons
Адаптивный веб-дизайн набирает популярность - благодаря необходимости создавать сайты, которые работают на многочисленных устройствах.
Тем не менее, адаптивный дизайн имеет свои проблемы. выпуск медленно загружаемых сайтов сейчас хорошо документировано. Давайте пройдемся по некоторые из уловок дизайнеров используют для лучшей загрузки контента и изображений на разных устройствах.
Медиа-запросы для вызова стилей
Одним из таких приемов является использование медиа-запросов, которые работают для вызова стилей для пользовательского устройства на основе его измерений. В прошлом велись споры о том, являются ли медиа-запросы лучшим решением, когда речь заходит о мобильных устройствах, и что дебаты все еще продолжаются , Тем не менее, группа сообщества Responsive Issues (RICG) и W3C рассмотрели способы реализации запросов элементов, которые некоторые считаю, что будет лучшим решением , Зачем? Потому что они зависят не от области просмотра, а от контейнера внутри него. Медиа-запросы - это простой и эффективный способ доставки различного контента на ряд устройств, и наиболее часто используемые запросы относятся к высоте и ширине области просмотра.
Вызов с использованием внешней таблицы стилей или таблицы стилей
Как мы описали в бесплатной электронной книге Шаблоны мобильного интерфейса медиазапросы сначала проверяют тип медиа по строке пользовательского агента, а затем проверяют физические атрибуты области просмотра. Они являются декларацией CSS, которая может быть вызвана с использованием внешней таблицы стилей или написана непосредственно внутри таблицы стилей.
Например, внешний вызов будет выглядеть так:
Экран <link rel = ”stylesheet” media = ”и (min-width: 320px) и (max-width: 480px)« href = »css / yourstylesheet.css» />
И прямой вызов CSS будет выглядеть так:
1 экран @media и (минимальная ширина: 320 пикселей)
2 и (максимальная ширина: 480 пикселей) {
3 / * Вставьте ваши стили здесь
4}
Здесь мы видим, что эти объявления CSS вызываются только для устройств с такими свойствами высоты и ширины. Медиа-запросы не являются модульными, поэтому это может затруднить работу с ними, как обсуждал Иан Сторм Тейлор. Тем не менее, другие настаивают на использовании элементарных запросов, как указала Рича Джейн в своей превосходной статье «Вне медиазапросов - пора получить элементаль». Но пройдет некоторое время, прежде чем мы увидим, как они реализованы, если они вообще есть, поэтому на данный момент мы застряли в медиа-запросах и проблемах, которые их окружают.
Запросы элементов еще не поддерживаются
Были некоторые инновационные разработчики, которые придумали обходные пути, такие как Тайсон Матанич, который придумал запрос элемента 'polyfill' ,
Другие обходные пути включают в себя ( нашел благодаря Рича Джайн ):
Запрос элемента аналогичен медиазапросу, поскольку при определенных условиях он использует CSS. Однако они основаны на элементах, а не на браузере, который в настоящее время не поддерживается в CSS3. Запросы элементов набирает обороты, тем более что они дополняют медиа-запросы. Это означает, что оба могут в конечном итоге работать вместе для создания более модульных и гибких конструкций.
Начало работы с медиа-запросами
Во-первых, важно понимать разницу между медиа-запросами на основе «ширины» и «ширины устройства». Первая описывает ширину поверхности рендеринга мобильных устройств, а вторая - фактическую ширину экрана устройства.
Кредит Фотографии: Tribehut , Creative Commons
Другими словами, вы будете применять правило только к ширине окна документа, используя медиа-запрос 'width'. В то время как с 'device-width' вы будете использовать весь экран. Это важное различие. Это потому, что «ширина устройства» не всегда соответствует макету области просмотра и может реально повлиять на ваш дизайн. Смотрите более подробное объяснение в Статья Райана Риза о SitePoint.
Как указывает Райан:
«Для справки, вы должны знать, что iPhone 4 имеет стандартный видовой экран с размером экрана 640 × 960. Это означает, что в этом примере ширина устройства iPhone4 составляет 320 × 480. Это так, потому что Apple понимает, что не каждый веб-сайт построен быстро (стыдно за них), и старается угодить всем, имея ширину около 980 пикселей, чтобы приспособить сайт к рабочему столу. Это означает, что если мета-тег viewport отсутствует, iPhone4 возьмет ваш веб-сайт, отобразит его так, как если бы он был шириной 980 пикселей, поместил его на экран 320 пикселей и в результате уменьшил бы его до пользователя. »
Однако вам не нужно ограничиваться использованием медиазапросов на основе устройств. Вы можете реализовать медиа-запросы для разрешений, которые нарушают макет, независимо от размера экрана. Например, адаптивный каркас Foundation имеет медиазапросы на основе трех основных точек останова: маленький, средний и большой , Малый охватывает все экраны. Средние размеры экранов 640 пикселей или более. Большие экраны покрывают 1024px или шире.
Добавление запросов для разных видовых экранов
Как видите, мы добавили запросы для пейзажных и портретных видовых экранов, а также установили параметры для некоторых распространенных размеров экрана. Приблизительно пять размеров охватят большинство устройств, но вы можете включить столько, сколько захотите. Вы также можете добавить дополнительные стили в зависимости от того, как вы хотите, чтобы контент выглядел на каждом устройстве.
Например, если вы хотите, чтобы содержимое на мобильном устройстве отображалось определенным шрифтом, или вы хотите использовать другой цвет фона, добавьте следующее под тем, где мы отметили / * добавьте ваш стиль здесь * /:
1 .site-content {
2 семейства шрифтов: Грузия;
3 фон: синий;
4}
Работа с изображениями
Масштабирование изображений для адаптивного дизайна достаточно просто. Тем не менее, есть несколько проблем, на которые следует обратить внимание, таких как потеря детализации и сжатие изображений, чтобы соответствовать размеру контейнера, занимая большую часть страницы на небольших устройствах.
Кредит Фотографии: Томаш Финк , Creative Commons
Чтобы создать масштабируемые изображения, просто добавьте следующий код в таблицу стилей:
1 img {
2 максимальная ширина: 100%;
3}
Это уменьшит изображение, чтобы оно поместилось в контейнере, который меньше ширины изображения. Установка max-width на 100% означает, что изображение не будет масштабироваться больше, чем его фактический размер, когда вызывается для больших окон просмотра.
Тем не менее, это может быть проблемой, когда речь заходит о производительности сайта, потому что вы, по сути, предоставляете полноразмерное изображение на каждое устройство. Нет простого решения, особенно если вы работаете над сайтом, на котором есть устаревшие изображения. Тем не мение, Адаптивные изображения это плагин, который может оптимизировать ваши изображения на основе размеров экрана и имеет отличную репутацию. И основа отзывчивой основы также позволяет менять изображения в зависимости от размеров экрана ,
При работе с изображениями вы должны по возможности использовать SVG, веб-шрифты, веб-тип и CSS. Для дальнейшего чтения, проверьте Пост Криса Койера на CSS-хитрости и Шерри Александр Smashing Magazine статья ,
Другие медиа запросы
Могу ли я использовать имеет полный список браузеров и медиа-запросов что они поддерживают, а также статистику использования для различных стран по всему миру и их известные проблемы.
Источник изображения: Могу ли я использовать
Вы также можете найти полный список медиа-запросов, и если они поддерживаются или нет на CSS Media Queries , Также есть область, где вы можете протестировать созданные вами запросы.
Береги себя с производительностью
Медиа-запросы используются в адаптивном веб-дизайне, который позволяет просматривать сайт на экранах различных размеров и в разных браузерах. Как мы уже говорили, медиа-запросы не являются модульными, поэтому это может вызвать проблемы с дизайном, которые могут быть сложными для работы. вокруг. В Интернете можно найти огромное количество ресурсов, чтобы помочь вам с этим, таких как фрагменты кода и рамки ,
При работе с медиа-запросами важно убедиться, что вы понимаете производительность и ее влияние на UX и конверсии. Медленная загрузка сайта будет расстроить пользователей и заставить их отказаться от своих покупок. И это в конечном итоге будет стоить владельцу много денег в упущенном доходе
Мобильная революция гарантировала, что мы больше не будем терпеть ужасный веб-опыт. При разработке адаптивного сайта следует рассмотреть возможность использования условной загрузки, чтобы уменьшить объем контента, отправляемого на целевое устройство.
Кнопки обмена социальными сетями тоже замедляют работу сайтов, особенно на мобильном телефоне , Всего три социальные кнопки для Facebook, Twitter и G + составляют всего 19 запросов и занимают 246,7 Кб пропускной способности , Имея это в виду, рассмотрите возможность использования веб-шрифтов на главной странице для URL-адресов социальных сетей, а не изображений, и ограничьте количество кнопок общего доступа в своих сообщениях в блоге.
В качестве альтернативы вы можете использовать плагины jQuery немного ускорить использование кнопок в социальных сетях.
Есть множество онлайн-уроков, которые помогут вам с адаптивным веб-дизайном и медиа-запросами. Мы надеемся, что дали вам отличную отправную точку, чтобы вы могли приступить к работе с медиа-запросами.
Если вы хотите узнать больше о внешнем визуальном дизайне, взгляните на нашу бесплатную электронную книгу Шаблоны мобильного интерфейса , Мы проанализировали 46 наиболее эффективных, но в то же время гибких шаблонов проектирования, основанных на их использовании ведущими компаниями, такими как Spotify, Pinterest, Uber, Instagram, Flipboard и многими другими.