Интернет взлетел быстрее, чем кто-либо мог это предсказать и растёт как сумасшедший. За последние несколько лет вдобавок на сцену ворвались мобильники. Рост потребления мобильного Интернета также опережает общий рост использования Интернета.
В наши дни трудно найти человека, который не владеет мобильным устройством или даже несколькими, подключенных к Интернету. В Великобритании больше мобильных телефонов, чем людей и если данный тренд продолжится, то использование мобильного Интернета превзойдёт настольный Интернет в течение года.
С ростом использования мобильного Интернета возникает вопрос о том, как создавать веб-сайты, подходящие для всех пользователей. Индустрия ответила на этот вопрос отзывчивым веб-дизайном.
Обзор отзывчивости
Отзывчивый веб-дизайн является практикой создания веб-сайта, подходящего для работы на любом устройстве с любым размером экрана, независимо от того, насколько он большой или маленький, мобильный или настольный. Отзывчивый веб-дизайн сосредоточен вокруг представления об интуитивном и приятном опыте для каждого. Настольный компьютер и сотовый телефон пользователя, все они выигрывают от отзывчивых сайтов.
Термин отзывчивый веб-дизайн сам по себе придумал и в значительной степени разработал Итан Маркотт. Многое из того, что рассмотрено в этом уроке было впервые сказано Итаном в сети и в его книге Отзывчивый веб-дизайн, которую стоит прочитать.
Рис. 4.01. Food Sense имеет красивый дизайн, отзывчивый при самых разных размерах окна. Независимо от того, насколько экран большой или маленький, сайт Food Sense подстраивается под него, создавая естественный пользовательский опыт.
Отзывчивый, адаптивный и мобильный
Для некоторых термин отзывчивый может быть не нов, а другие могут быть лучше знакомы с термином адаптивный или мобильный. Для вас может представлять интерес, в чём разница между всеми этими терминами.
Отзывчивый и адаптивный веб-дизайн тесно связаны и часто меняются друг с другом местами. Отзывчивый обычно означает реакцию быстро и положительно реагировать на любое изменение, в то время как адаптивный значит легко приспосабливаться к новой цели или ситуации при их изменении. С отзывчивым дизайном сайты постоянно и плавно меняются в зависимости от различных факторов, таких как ширина окна, а адаптивные сайты строятся на группах предустановленных факторов. Сочетание этих двух идеально, обеспечивая идеальную формулу для функциональных сайтов. Какой термин использовать особо не имеет большой разницы.
Мобильный, с другой стороны, как правило, означает создание отдельного сайта обычно на новом домене исключительно для мобильных пользователей. Хотя в этом иногда есть свой смысл, но обычно это не является хорошей идеей. Мобильные веб-сайты могут быть чрезвычайно лёгкими, но они зависят от нового базового кода и поведения браузера, всё это может стать препятствием как для разработчиков, так и для пользователей.
В настоящее время наиболее популярный метод заключается в отзывчивом веб-дизайне, в пользу дизайна, который динамически адаптируется к различным браузерам и устройствам, меняя макет и контент на этом пути. Это решение содержит преимущества всех трёх: отзывчивого, адаптивного и мобильного.
Гибкие макеты
Отзывчивый веб-дизайн разбивается на три основных компонента, включая гибкие макеты, медиа-запросы и гибкий медиа-контент. Первая часть, гибкие макеты — это практика построения макета сайта с гибкой сеткой, которая способна динамически уменьшать размер до любой ширины. Гибкие сетки строятся с использованием относительных единиц длины, как правило, процентов или единиц em. Эти относительные длины затем применяются, чтобы объявить основные значения свойств сетки, таких как width , margin или padding .
Относительные размеры области просмотра
CSS3 ввёл несколько новых относительных единиц длины, в частности, связанных с размером области просмотра браузера или устройства. Эти новые единицы включают vw, vh, vmin и vmax. Общая поддержка этих новых единиц не велика, но она растёт. Со временем они начнут играть большую роль в построении отзывчивых сайтов.
vw Ширина области просмотра vh Высота области просмотра vmin Меньшее значение из ширины и высоты области просмотра vmax Большее значение из ширины и высоты области просмотра
Гибкие макеты не выступают за использование фиксированных единиц измерения, таких как пиксели или дюймы. Причина в том, что высота и ширина области просмотра непрерывно меняются от устройства к устройству. Макеты сайтов нужно адаптировать к этим изменениям и у фиксированных значений слишком много ограничений. К счастью, Итан вывел простую формулу, которая помогает определить пропорции гибкого макета с помощью относительных значений.
Формула основана на взятии целевой ширины элемента и делении её на ширину родительского элемента. Результатом является относительная ширина целевого элемента.
цель ÷ контекст = результат
Гибкая сетка
Давайте посмотрим, как эта формула работает внутри двухколоночного макета. Ниже у нас есть родитель с классом container, который оборачивает элементы и . Цель состоит в том, чтобы располагался слева, а справа, с одинаковыми отступами между ними. Как правило, разметка и стили для этого макета будут выглядеть несколько похоже на следующее.
Используя формулу гибкой сетки можно взять все фиксированные единицы длины и превратить их в относительные единицы. В этом примере мы воспользуемся процентами, но единицы em будут работать также хорошо. Заметьте, независимо от того, насколько широким становится родительский container , margin и width для и масштабируются пропорционально.
Взяв идею гибкого макета с формулой и повторно применяя их ко всем частям сетки, мы создадим полностью динамический сайт, масштабирующийся до любого размера области просмотра. Для ещё большего контроля над гибким макетом можно также использовать свойства min-width , max-width , min-height и max-height .
Одного гибкого макета само по себе недостаточно. Порой ширина браузера может быть настолько мала, что даже пропорциональное масштабирование макета будет создавать слишком узкие колонки для эффективного отображения контента. В частности, когда макет становится слишком мал или слишком велик, текст может стать неразборчивым и компоновка может сломаться. В этом случае могут быть использованы медиа-запросы, которые помогут оставить лучшее впечатление.
Медиа-запросы
Медиа-запросы были построены как расширение типов носителей, которые обычно встречаются при ориентации и включении стилей. Медиа-запросы предоставляют возможность задавать различные стили для отдельных браузеров и поведения устройств, к примеру, ширины экрана или ориентации устройства. Умение применить уникальные стили открывает целый мир возможностей и рычагов для отзывчивого веб-дизайна.
Инициализация медиа-запросов
Есть несколько разных способов применения медиа-запросов — с помощью правила @media в существующей таблице стилей, импорта новой таблицы стилей через правило @import и путём ссылки на отдельную таблицу стилей внутри HTML-документа. Вообще говоря, рекомендуем использовать правило @media внутри существующей таблицы стилей, чтобы избежать каких-либо дополнительных HTTP-запросов.
/* Правило @media */ @media all and (max-width: 1024px) /* Правило @import */ @import url(styles.css) all and (max-width: 1024px)
Каждый медиа-запрос может включать в себя тип носителя, за которым следует одно или несколько выражений. Основные типы носителей включают в себя all , screen , print , tv и braille . Спецификация HTML5 содержит новые типы носителей, включая даже 3d-glasses . Если тип носителя не может быть указан, медиа-запросом по умолчанию будет screen.
Выражение медиа-запроса, которое следует за типом носителя может включать в себя различные мультимедийные функции и значения, которые затем считаются истиной или ложью. Когда медиа-функция и значение истинны, стили применяются. Если медиа-функция и значение ложны, то стили игнорируются.
Логические операторы в медиа-запросах
Логические операторы в медиа-запросах помогают построить мощные выражения. Существуют три разных логических оператора, доступных для использования в медиа-запросах: and , not и only .
Использование логического оператора and в медиа-запросе позволяет добавить дополнительное условие и убедиться, что браузер или устройство одновременно выполняет а, б, в и т. д. Несколько отдельных медиа-запросов могут быть разделены запятой, действуя как негласный оператор or (или). В приведённом ниже примере выбираются все типы носителей с шириной между 800 и 1024 пикселей.
@media all and (min-width: 800px) and (max-width: 1024px)
Логический оператор not отрицает запрос с указанием любого запроса, но только одного. В приведённом ниже примере выражение применяется к любому устройству, у которого нет цветного экрана. Чёрно-белые или монохромные экраны, к примеру, применяться будут.
@media not screen and (color)
Логический оператор only представляет собой новый оператор и не распознаётся браузерами, использующих алгоритм HTML4, что позволяет скрыть стили от устройств или браузеров, которые не поддерживают медиа-запросы. Выражение ниже выбирает только экраны в портретной ориентации на устройствах, способными работать с медиа-запросами.
@media only screen and (orientation: portrait)
Опускаем тип носителя
При использовании логических операторов not и only тип носителя может быть отброшен. В этом случае тип носителя по умолчанию принимается all .
Медиа-функции в медиа-запросах
Знание синтаксиса медиа-запроса и принципов работы логических операторов является прекрасным введением в медиа-запросы, но настоящая работа начинается с медиа-функций. Медиа-функции определяют, какие атрибуты или свойства будут направлены в выражение медиа-запроса.
height и width
Одна из наиболее распространённых медиа-функций вращается вокруг определения высоты или ширины области просмотра устройства или браузера. Высота и ширина могут быть найдены с помощью медиа-функций height , width , device-height и device-width . Каждая из этих медиа-функций также может быть использована с префиксом min или max, вроде min-width или max-device-width .
Функции height и width базируются на высоте и ширине области визуализации, окна браузера, к примеру. Функции device-height и device-width с другой стороны основаны на высоте и ширине выходного устройства, которое может быть больше, чем фактическая область визуализации. Значением этих медиа-функций может быть любая единица длины, относительная или абсолютная.
@media all and (min-width: 320px) and (max-width: 780px)
В отзывчивом дизайне наиболее часто используемые функции включают min-width и max-width . Они помогают построить отзывчивые веб-сайты на компьютерах и мобильных устройствах одинаково, избегая путаницы с особенностями устройств.
Использование префиксов min и max
Префиксы min и max могут быть использованы со многими медиа-функциями. Префикс min указывает значения больше или равно, тогда как префикс max указывает значения меньше или равно. Использование префиксов min и max позволяет избежать конфликта с общим синтаксисом HTML, без специального задействования символов < и >.
orientation
Медиа-функция orientation определяет, находится ли устройство в альбомной ( landscape ) или портретной ( portrait ) ориентации. Режим landscape срабатывает, когда дисплей шире, чем высота, режим portrait срабатывает, когда высота дисплея больше ширины. Эта медиа-функция играют роль в основном с мобильными устройствами.
@media all and (orientation: landscape)
aspect-ratio
Функции aspect-ratio и device-aspect-ratio определяют соотношение ширины к высоте в пикселях целевой области визуализации или устройства вывода. Префиксы min и max доступны для использования с различными функциями, выявляя соотношения выше или ниже того, о котором говорится.
Значение функции состоит из двух положительных целых чисел, разделённых косой чертой. Первое число задаёт ширину в пикселях, а второе число задаёт высоту в пикселях.
@media all and (min-device-aspect-ratio: 16/9)
pixel-ratio
Кроме медиа-функции aspect-ratio есть также функция pixel-ratio . Она включает функцию device-pixel-ratio , также с префиксами min и max. В частности, эта функция отлично подходит для определения устройств высокой чёткости, в том числе дисплеев ретина. Медиа-запрос для этого выглядит следующим образом.
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)
resolution
Медиа-функция resolution определяет разрешение устройства вывода в виде плотности пикселей, также известной как число точек на дюйм или DPI. Функция resolution также принимает префиксы min и max. Кроме того, функция resolution принимает число точек на пиксель (1.3dppx), точек на сантиметр (118dpcm) и другие размеры на основе значений разрешения.
@media print and (min-resolution: 300dpi)
Другие медиа-функции
Другие функции включают в себя определение доступных выходных цветов с помощью color , color-index и monochrome , выявление растровых устройств через функцию grid , а также определение процесса сканирования телевизора функцией scan . Эти функции менее распространены, но столь же полезны при необходимости.
Поддержка медиа-запросов в браузерах
К сожалению медиа-запросы не работают в Internet Explorer 8 и ниже, а также других устаревших браузерах. Есть, однако, пара подходящих костылей написанных на JavaScript.
Respond.js представляет собой облегчённый костыль, он ищет только min/max-width и должен идеально подходить там, где используются только эти медиа-запросы. CSS3-MediaQueries.js более развит и тяжелее, и предлагает поддержку более широкого множества более сложных медиа-запросов. Кроме того, имейте в виду, что любой костыль может иметь проблемы с производительностью и потенциально замедлить сайты. Убедитесь, что любой подобный костыль заслуживает снижения производительности.
Демонстрация медиа-запросов
Используя медиа-запросы мы сейчас перепишем гибкие макеты, которые построили ранее. Одна из текущих проблем в демонстрации появляется, когда ширина становится безуспешно маленькой на небольших экранах. Добавив медиа-запрос для области просмотра ниже 420 пикселей в ширину, мы можем изменить макет, отключив float и изменив ширину и .
@media all and (max-width: 420px) < section, aside < float: none; width: auto; >>
Рис. 4.02. Без каких-либо медиа-запросов и становятся слишком узкими. Возможно, даже чересчур, чтобы содержать любой реальный контент.
Рис. 4.03. С помощью медиа-запросов мы убираем float и меняем ширину и . Теперь они занимают всю ширину области просмотра, добавляя свободное пространство существующему содержимому.
Определение контрольных точек
Ваш инстинкт может подсказать писать контрольные точки в медиа-запросах основываясь на основных размерах области просмотра, как это определено разными разрешениями устройств, таких как 320px, 480px, 768px, 1024px, 1224px и т. д. Это плохая идея.
При построении отзывчивого сайта следует настроить массив различных размеров области просмотра, независимо от устройства. Контрольные точки должны быть введены только когда сайт начинает рушиться, выглядит странно или этому препятствует опыт.
Кроме того, всё это время выходят новые устройства и разрешения. Попытка идти в ногу с этими изменениями это бесконечный процесс.
Сначала мобильные
Один из популярных методов использования медиа-запросов называется «сначала мобильные». Данный подход включает в себя использование стилей, ориентированных на более мелкие экраны как стили по умолчанию для сайта, а затем использование медиа-запросов, чтобы добавить стили по мере роста экрана.
Вера в мобильные заключается в том, что пользователь мобильного устройства обычно использует меньший экран и не должен загружать стили для настольного компьютера, которые перепишут мобильные стили позже. Это пустая трата трафика. Трафик это ценность для любых пользователей, которые ищут реактивный сайт.
Подход «сначала мобильные» также учитывает в дизайне ограничения мобильного пользователя. В недалеком будущем большинство интернет-соединений будет сделано на мобильных устройствах. План состоит в том, что для этого соответственно и развивать важный мобильный опыт.
Контрольные точки медиа-запросов с учётом «сначала мобильные» могут выглядеть следующим образом.
/* Сперва стили по умолчанию, затем медиа-запросы */ @media screen and (min-width: 400px) @media screen and (min-width: 600px) @media screen and (min-width: 1000px) @media screen and (min-width: 1400px)
Кроме того, загрузка ненужных ресурсов может быть остановлена с помощью медиа-запросов. Вообще говоря, удаление теней, градиентов, трансформации и анимации в мобильных стилях сама по себе неплохая идея. При их чрезмерном применении они вызывают тяжёлую нагрузку и даже могут сократить время работы батареи.
/* Стили по умолчанию */ body < background: #ddd; >/* Стили для больших устройств */ @media screen and (min-width: 800px) < body < background-image: url("bg.png") 50% 50% no-repeat; >>
Демонстрация
Добавив медиа-запросы к нашему предыдущему примеру, мы перепишем несколько стилей, чтобы макет выглядел лучше на экранах меньше 420 пикселей в ширину. Переписывая этот код, мы вначале добавим мобильные стили по умолчанию, затем медиа-запросы для настройки экранов с шириной более 420 пикселей, следующим образом:
Заметьте, здесь такое же количество кода, что и раньше. Единственным исключением является то, что мобильные устройства требуют только единственную запись CSS. Остальные стили отложены и загружаются только на больших экранах и сделано это без переписывания начальных стилей.
viewport
Мобильные устройства в наши дни, как правило, довольно прилично выполняют работу по отображению сайтов. Иногда им может понадобиться небольшая помощь, связанная, в частности, с определением размера области просмотра, масштабированием и разрешением сайта. Чтобы исправить это, Apple внедрил метатег viewport .
Рис. 4.04. Хотя это всего лишь демонстрация медиа-запросов, многие мобильные устройства до сих пор не знают о начальной ширине или масштабировании сайта. При этом они могут не препятствовать медиа-запросам.
Высота и ширина области просмотра
Использование метатега viewport со значениями height или width будет определять, соответственно, высоту или ширину области просмотра. Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принимается ключевое слово device-height , а для свойства width принимается ключевое слово device-width . С помощью этих ключевых слов будет наследоваться ширина и высота устройства по умолчанию.
Для достижения наилучших результатов и красиво выглядящего сайта рекомендуется использовать значения устройства по умолчанию путём применения device-height и device-width .
Рис. 4.05. Разрешив устройствам узнать предполагаемую ширину сайта, device-width в данном случае, это позволило сайту принять правильный размер и подобрать любые точные медиа-запросы.
Масштабирование области просмотра
Для управления масштабированием сайта на мобильном устройстве и насколько пользователи могут его масштабировать, применяются свойства minimum-scale , maximum-scale , initial-scale и user-scalable .
initial-scale для сайта должно быть установлен в 1, так как это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, то это будет соотношение между шириной устройства и размером области просмотра. Значением initial-scale всегда должно быть положительное целое число от 0 до 10.
Рис. 4.06. Использование целого числа больше 1 будет увеличить сайт больше, чем масштаб по умолчанию. Вообще говоря, это значение наиболее часто устанавливается в 1.
Значения minimum-scale и maximum-scale определяют, насколько область просмотра может масштабироваться в меньшую и большую стороны. При использовании minimum-scale значение должно быть положительным целым числом меньше или равным initial-scale . Используя те же рассуждения, значение maximum-scale должно быть положительным целым числом больше или равным initial-scale . Оба значения также должны быть от 0 до 10.
Вообще говоря, эти значения не должны быть установлены на то же значение, что и initial-scale . Это позволит отключить любое масштабирование, которое может быть выполнено взамен применения значения user-scalable . Установка значения user-scalable в no отключит любое масштабирование. В качестве альтернативы, установив значение user-scalable в yes мы включим масштабирование.
Выключение возможности масштабирования сайта является плохой идеей. Это вредит доступности и удобству, мешая людям с ограниченными возможностями просматривать сайт по желанию.
Разрешение области просмотра
Давая браузеру решать, как масштабировать сайт основываясь на любых значений масштаба области просмотра, обычно делают один трюк. Когда требуется больше контроля, в частности, над разрешением устройства, может быть использовано значение target-densitydpi . target-densitydpi принимает несколько значений, включая device-dpi , high-dpi , medium-dpi , low-dpi или конкретное число точек на дюйм.
Значение target-densitydpi применяется редко, но оно чрезвычайно полезно, когда необходим попиксельный контроль.
Комбинация значений
Метатег viewport принимает отдельные значения наряду с множеством значений, позволяя установить несколько свойств за раз. Установка нескольких значений требует разделения запятыми в значении атрибута content . Одно из рекомендованных значений приведено ниже, в котором используются свойства width и initial-scale .
Рис. 4.07. Комбинация width=device-width и initial-scale=1 обеспечивает начальный размер и требуемое масштабирование.
Правило @viewport
Поскольку метатег viewport вращается преимущественно вокруг установки стилей, которые определяют как должен отображаться сайт, то рекомендуем переместить его из HTML в правило @viewport в CSS. Это помогает сохранить стиль отдельно от содержания, обеспечивая более семантический подход.
В настоящее время в некоторых браузерах уже реализовано правило @viewport , однако поддержка не так повсеместна. Ранее рекомендованный метатег viewport будет выглядеть следующим правилом в CSS.
@viewport
Гибкий медиа-контент
Последний, но не менее важный аспект отзывчивого веб-дизайна включает гибкий медиа-контент. Когда начинает меняться область просмотра, медиа-контент не всегда под это подстраивается. Изображения, видео и другой медиа-контент должен быть масштабируемым, меняя свой размер при изменении размера области просмотра.
Быстрый способ сделать медиа-контент масштабируемым — это использовать свойство max-width со значением 100%. Это гарантирует, что при уменьшении области просмотра любой медиа-контент будут уменьшаться в соответствии с шириной контейнеров.
img, video, canvas
Демонстрация гибких изображений
Встраивание гибкого медиа-контента
К сожалению, свойство max-width не очень хорошо работает для всех случаев медиа-контента, в частности, для и встраиваемого медиа-контента. Когда дело доходит до внешних сайтов вроде YouTube, которые используют для встраиваемого медиа-контента, это огромное разочарование. К счастью, есть решения.
Чтобы встраиваемый медиа-контент был полностью отзывчивым, элемент должен быть позиционирован абсолютно в родительском элементе. У родителя width должен быть 100%, чтобы он мог масштабироваться, основываясь на ширине области просмотра. Родительский элемент также должен иметь height равный 0, чтобы включить механизм hasLayout в Internet Explorer.
Затем добавляем padding снизу родительского элемента, значение которого устанавливается таким же, что и соотношение сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните формулу гибкого макета? Если у видео соотношение сторон 16:9, то 9 разделить на 16 будет .5625, таким образом требуется нижний padding равный 56.25%. padding снизу, а не сверху используется специально для предотвращения Internet Explorer 5.5 от поломки и лечения родительского элемента, как абсолютно позиционированного.
Как сделать один сайт для всех устройств (Responsive Web Design)
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:
«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства < max-width: 100% >. Изображение с img < max-width: 100% >никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Здесь базовые стили для глупых браузеров. Например , для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же : ) .
@media only screen and (min-width: 480px)
Здесь стили более разумных , но все еще мобильных устройств. Android , iPhone и так далее.
@media only screen and (min-width: 768px)
Планшеты в режиме portrait.
@media only screen and (min-width: 992px)
Планшеты в режиме landscape , нетбуки , ноутбуки , десктоп.
@media only screen and (min-width: 1382px)
Десктоп с большими разрешениями , телевизоры.
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Ссылки
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
media queries
css
html
mobile first
responsive web design
адаптивный сайт
адаптивный дизайн
Адаптивный, отзывчивый дизайн или мобильное приложение: выбираем нужный вариант
Крупные компании давно осознали необходимость адаптации сайта под мобильные устройства. Последние несколько лет характеризуются радикальными изменениями поведения покупателей. Пользователи перестали пользоваться стационарным компьютером в процессе поиска, прочтения необходимой информации. Существующее положение вещей требует трансформации информационных источников, существующих каналов продаж.
Несмотря на последние изменения, адаптация интернет — проектов для высокотехнологичных гаджетов остается сложной задачей. Процесс не ограничивается принятием маркетинговых решений (отбор нужных элементов, необязательных пунктов меню). Дело касается технической точки зрения. Запутанная терминология вызывает новые трудности.
Определите приоритетное для компании направление: проектирование ресурса, дружелюбного новомодным девайсам, инвестирование в автономное программное обеспечение для современных гаджетов. Вопрос с подвохом, поскольку оба направления порой оказываются одинаково важны.
Выбор здесь – одновременно благословение и проклятие. Однозначный ответ относительно предпочтительного варианта отсутствует. Оба подхода имеют определенные достоинства и недостатки. Выбор определяется вкусом, потребностями, задачами предприятия, рядом дополнительных условий, рассматриваемых позже.
Основные преимущества оптимизации информационного наполнения интернет — проекта под современные устройства – занимаемое время, потраченные деньги
В процессе рассмотрения предпринимателями и менеджерами по продукту указанные параметры играют первостепенную роль, особенно когда лица, ответственные за принятие решений, не обладают достаточными знаниями относительно технических аспектов процесса разработки.
Подробное изучение существующей дилеммы, требует учета многие факторы. Рассмотрим основные различия между двумя имеющимися вариантами:
Указанный термин предполагает адаптацию цифрового контента к любому разрешению экрана устройства, на которых просматривается информационное содержимое.
Отзывчивый веб-дизайн приобрел популярность, когда бизнес понял одну простую вещь: корпоративный сайт, не работающий на смартфонах и планшетах, ухудшает пользовательский опыт, препятствуя конверсии потенциального покупателя в клиента компании.
Отзывчивый и адаптивный дизайн
Ранее отмечалось, что оба типа предназначены для создания сайтов, дружественных планшетам и смартфонам, между ними существует определенная разница. Разработка отзывчивого ресурса предполагает его автоматическую адаптацию к любому имеющемуся устройству, адаптивный дизайн, привязан к предопределенному размеру экрана.
Запуск адаптированного портала требует предоставить макет для каждого размера экрана, на котором ожидается просмотр его содержимого. Игнорирование хотя бы одного приспособления увеличивает шансы на некорректное отображение информации на данном смартфоне.
Адаптивный дизайн: преимущества и недостатки
Разработать такой ресурс гораздо проще и быстрее, чем автономное программное обеспечение. Однако при принятии окончательного решения следует учитывать недостатки данного варианта. Адаптивные интернет-проекты, хоть и позволяют сэкономить бюджетные средства, требуют подключения к Интернету, поскольку для их работы используются интернет-браузеры. Следовательно, проект не может быть доступен в любом месте в любое время. В зависимости от целей предлагаемого продукта данная ситуация может не соответствовать потребностям пользователей.
На современных девайсах ресурс работает медленнее, чем на стационарных компьютерах, поскольку некоторые компоненты (изображения, некоторые скрипты) слишком «тяжелы», загружаются слишком медленно. Пользователям приходится ждать, пока браузер загрузит страницу полностью со всеми элементами. Результат: значительное увеличение количества трафика, потребления батареи, затраченного времени.
Также следует учитывать то обстоятельство, что push-уведомления, являющиеся очень эффективным способом привлечения внимания потребителей, могут использоваться только в мобильных приложениях. Для сайтов они недоступны.
Адаптивные сайты не могут получить доступ к другим функциям телефона, кроме браузера, например, к камере или календарю. Такое техническое ограничение влияет на производительность продукта, ограничивает разработчиков на этапе проектирования.
Обычно они стоят дороже, поскольку команда разработчиков создает уникальный дизайн и код для каждой операционной системы. Кроме того, перед запуском на рынок, такое программное обеспечение должно пройти процесс утверждения в специальных магазинах, отнимающий много времени.
Однако, с точки зрения качества, скорости и возможности использования функций телефона мобильные приложения – лучшее решение для бизнеса. Они получают доступ к большинству функций телефона (календарь, камера и прочее.). Поэтому разработчики могут проверить его работу вместе с различными инструментами. Им больше не нужно ограничиваться только окном браузера.
Мобильные приложения – инструмент, позволяющий предприятиям напрямую перейти на экран устройства клиента. Пользователи лишены необходимости открывать браузер, вводить URL-адрес. Достаточно нажать значок и потребитель готов совершать покупки в Интернете, играть в игры, проверять банковский счет.
Перед принятием окончательного решения, оцените потребности компании. Возможно, предприятию не нужно инвестировать средства в программное обеспечение для смартфонов при наличии информационного ресурса. Отзывчивого дизайна будет достаточно.
При условии ограниченного бюджета рассмотрите возможность создания кроссплатформенного приложения, работающего на iOS и Android.
Отзывчивый дизайн
На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна(responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.
Необходимые знания:
Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS и Устройство CSS.)
Задача:
Понять базовые концепции и историю отзывчивого дизайна.
Исторические макеты сайтов
В какой-то момент истории при разработке веб-сайта у вас было два варианта:
Вы могли создать жидкий сайт, который будет растягиваться чтобы заполнить окно браузера
или сайт с фиксированной шириной, который будет иметь фиксированный размер в пикселях.
Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.
Примечание: Посмотрите этот простой жидкий макет: пример, исходный код. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.
Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.
Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.
Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.
Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.
Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.
Гибкий макет до отзывчивого дизайна
Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.
Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
Отзывчивый дизайн
Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.
Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта — Fluid Grids (опубликовано в 2009 в A List Apart).
Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100% , изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.
Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
Медиавыражения
Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.
Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.
Вы можете добавлять несколько медиавыражений в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так, чтобы наилучшим образом соответствовать разным размерам экрана. Точки, в которых применяются медиавыражения и меняется макет, известны как контрольные точки.
Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют mobile first дизайном.
Узнать больше о медиавыражениях можно в документации MDN.
Гибкие сетки
Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.
Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.
В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.
target / context = result
Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.
.col width: 6.25%;/* 60 / 960 = 0.0625 */>
Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов (en-US) . В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:
На более широких экранах они перемещаются в два столбца:
Примечание: вы можете найти живой пример и исходный код этого примера на GitHub.
Современные технологии макетов
Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.
Multicol
Самый старый из этих методов — это multicol, когда вы задаёте column-count , это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.
.container column-count: 3;>
Если вместо этого вы зададите column-width , то вы определите минимальную ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.
.container column-width: 10em;>
Flexbox
В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.
.container display: flex;>.itemflex: 1;>
Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: пример, исходный код.
CSS grid
В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr . Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.
Примечание: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.
Отзывчивые изображения
Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:
img max-width: 100%;>
Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.
Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.
Отзывчивая типографика
Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.
В этом примере, мы хотим задать нашему заголовку первого уровня 4rem , что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px .
html font-size: 1em;>h1font-size: 2rem;>@media(min-width: 1200px)h1font-size: 4rem;>>
Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
В мобильных версиях заголовок меньше:
На компьютерах, однако, мы видим больший размер заголовка:
Примечание: смотрите этот пример в действии: пример, исходный код.
Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
Using viewport units for responsive typography
An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw , it will always relate to the size of the viewport.
h1 font-size: 6vw;>
The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.
There is a solution, and it involves using calc() . If you add the vw unit to a value set using a fixed size such as em s or rem s then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:
h1 font-size:calc(1.5rem + 3vw);>
This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.
Примечание: See an example of this in action: example, source code.
The viewport meta tag
If you look at the HTML source of a responsive page, you will usually see the following tag in the of the document.
This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.
Why is this needed? Because mobile browsers tend to lie about their viewport width.
This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.
The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=960px with the actual width of the device, so your media queries will work as intended.
So you should always include the above line of HTML in the head of your documents.
There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.
initial-scale : Sets the initial zoom of the page, which we set to 1.
height : Sets a specific height for the viewport.
minimum-scale : Sets the minimum zoom level.
maximum-scale : Sets the maximum zoom level.
user-scalable : Prevents zooming if set to no .
You should avoid using minimum-scale , maximum-scale , and in particular setting user-scalable to no . Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.
Summary
Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.
It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.
In this module
Introduction to CSS layout
Normal flow
Flexbox
Grid
Floats
Positioning
Multiple-column layout
Responsive design
Beginner’s guide to media queries (en-US)
Legacy layout methods (en-US)
Supporting older browsers (en-US)
Fundamental layout comprehension assessment
Found a content problem with this page?
Edit the page on GitHub.
Report the content issue.
View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
