Адаптивный дизайн сайта css: Что менять в HTML и CSS коде

Содержание

верстка под любой экран — учебник CSS

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

Как правило, полноценная версия сайта выглядит странно на обычном смартфоне. Чтобы рассмотреть текст, пользователю приходится пользоваться увеличением и горизонтальной прокруткой. С другой стороны, сайт в виде одной узкой колонки будет выглядеть еще более странно на широком компьютерном мониторе.

Адаптивный веб-дизайн (англ. responsive web design, RWD) — это подход к созданию веб-страниц, при котором их внешний вид определяется через CSS, основываясь на ширине окна браузера. Это позволяет обеспечить удобный дизайн для любого устройства, без необходимости создания нескольких разных сайтов.

CSS-инструменты для адаптивного дизайна

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

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

Медиа-запросы — это CSS-технология, которая позволяет определять условия для отображения тех или иных стилей. К примеру, вы можете задать один набор CSS-правил для экранов шириной менее 768 пикселей, второй — для ширины более 991 пикселей и т. д.

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

Настройки для адаптивного дизайна

Когда на мобильном устройстве просматривается сайт без адаптивного дизайна, браузер полностью помещает его в ширину экрана. При этом он выглядит, как на иллюстрации слева:

Источник: developers.google.com

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

Если же дизайн вашего сайта адаптивен, вам необходимо дополнительно сообщить об этом браузеру. Делается это легко — просто добавьте внутрь тегаследующую строку:


<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Данный мета-тег говорит браузеру, что ширина контента должна быть равна ширине экрана браузера, которая в свою очередь равна ширине экрана устройства, с которого просматривается веб-страница. Initial-scale контролирует уровень масштабирования при загрузке страницы.

К слову, указание этого мета-тега важно и для Google: при его отсутствии система не будет воспринимать веб-страницу как ту, что адаптирована под мобильные устройства.


Далее в учебнике: медиа-запросы CSS.

Адаптивная верстка сайтов: обзор подходов и CSS фреймворков

October 24, 2017 Jazz Team Технические статьи,

Предисловие

В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства. Однако, возникают некоторые нюансы при просмотре – для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.

О статье

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.

В данной статье будут рассмотрены виды версток, позволяющие корректно отображать сайты на любом разрешении, техники, с помощью которых это осуществляется. Разберем понятие CSS-фреймворка и сделаем сравнительный анализ наиболее популярных.

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка

Фиксированная верстка (Fixed Layout) – подход создания страниц сайта, которые имеют заданную ширину.

Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:

Резиновая верстка

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

max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

Адаптивная верстка

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина

div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) – это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Основные техники реализации сайтов под любое разрешение

Относительные значения

Использование относительных значений позволяет отобразить информацию и компоненты на странице без потери читабельности и удобства просмотра.

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера – указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

  • vw – 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
  • vh – 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
  • vmin – выбирается наименьшее из vw и vh;
  • vmax – выбирается наибольшее из vw и vh.

Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Относительные значения для размера шрифта

Существуют следующие относительные значения для шрифтов:

  • em – задаёт размер относительно шрифта родителя;
  • rem – задаёт размер относительно шрифта <html>.

Рассмотрим пример:

Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для

body будет равен 30px (20px * 1.5 = 30px).

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html – 16px.

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Рассмотрим пример:

Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в

max-width, это 500px. Как только контейнер достигнет этой ширины – он перестанет увеличиваться.

Использование медиа-запросов

Медиа-запросы позволяют задать стили для определенного размера экрана, типа устройства на основе характеристик устройства и т. д. Все медиа-запросы начинаются с @media, а далее следует условие.

С помощью медиа-запросов можно задать стили для следующих типов устройств:

  • all – все типы (значение используется по умолчанию)
  • braille – устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
  • embossed – принтеры, использующие для печати систему Брайля
  • handheld – смартфоны и аналогичные им аппараты
  • print – принтеры и другие печатающие устройства
  • projection – проекторы
  • screen – экран монитора
  • speech – речевые синтезаторы, а также программы для воспроизведения текста вслух
  • tty – устройства с фиксированным размером символов
  • tv – телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

Ссылки по техникам реализации адаптивной верстки

Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:

 

CSS-фреймворки

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:

  • Более быстрая разработка
  • Поддержка кроссбраузерности
  • Поддержка различных устройств и размеров экранов
  • Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.

Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы.

Рассмотрим самые популярные CSS-фреймворки.

Bootstrap

Официальный сайт:
http://getbootstrap.com/

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap – это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap – интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.

Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода – от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:

В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.

Отличительные черты:

  • 12 – колоночная сетка
  • Большое количество готовых для использования компонентов
  • Поддержка Less и Sass
  • Использование Normalize.css.

Material Design for Bootstrap

Официальный сайт:
https://fezvrasta.github.io/bootstrap-material-design/

Material Design for Bootstrap – это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

Отличительные черты:

  • 12 – колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

Materialize

Официальный сайт:
http://materializecss. com/

Materialize – современная, адаптивная платформа, построенная на принципе материального дизайна. В платформу включен набор компонентов, а также стили для них. Проработаны анимации и эффекты в компонентах, чтобы они были максимально плавными. Все элементы и анимации интуитивны и понятны пользователю, а единый адаптивный дизайн упрощает UX для всех платформ.

Отличительные черты:

  • 12 – колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
  • Поддержка Sass.

Bulma

Официальный сайт:
http://bulma.io/

Bulma – современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox – самый современный инструмент компоновки, доступный в CSS.

Отличительные черты:

  • Использование Flexbox вместо колоночной сетки
  • Большое количество готовых для использования компонентов
  • Поддержка Sass
  • Не используются JS-файлы

Pure

Официальный сайт:
https://purecss. io/

Pure – набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure – адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.

Отличительные черты:

  • 24 – колоночная сетка
  • Модульный фреймворк
  • Не используются JS-файлы
  • Использование Normalize.css
  • Минимальное количество готовых компонентов и стилей.

Заключение

Быстрый рост популярности просмотра сайтов на мобильных устройствах обуславливает необходимость реализации удобного и читабельного отображения компонентов в независимости от типа устройств и размеров экранов. Рассмотренные в данной статье подходы помогут создавать сайты для различных устройств и размеров экранов. Описание CSS-фреймворков упростит выбор подходящего фреймворка для использования в проекте.

CSS, адаптивная верстка, верстка, виды верстки, отзывчивая верстка, резиновая верстка, техническая статья, фиксированная верстка

Адаптивный веб-дизайн с использованием css или javascript?



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

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

Другое решение, которое использует агент пользователя для определения категории Устройства с помощью userAgent. Есть также проблема в том, что если устройство не интерпретирует javascript нормально, то страница может быть сломана.

Любое отличное решение, которое может решить мои проблемы выше? Или какое решение лучше?

Или я неправильно понял метод использования запроса media?

Спасибо.

javascript html css responsive-design
Поделиться Источник benleung     23 августа 2013 в 04:18

5 ответов


  • Адаптивный дизайн против адаптивного дизайна

    Не могли бы вы объяснить разницу между RWD (адаптивный веб-дизайн) и AWD (адаптивный веб-дизайн) простым способом?

  • Jquery Mobile или адаптивный дизайн?

    Я провел много исследований по созданию адаптивного дизайна. Поэтому я наткнулся на эту статью отсюда: Является ли это избыточным при использовании jQuery мобильных и адаптивных макетов /CSS media запросов? И это заставило меня задуматься. Разве адаптивный дизайн не заменит создание сайта Jquery…



13

CSS-это правильный путь, и вы всегда можете предоставить резервный вариант для браузеров , которые не поддерживают запросы media с помощью JS-плагина, такого как css3mediaqueries.js, но полагаться на JS исключительно для того, чтобы сделать ваш сайт отзывчивым, — это риск, потому что вы не можете точно сказать, будет ли у пользователя включен Javascript, а когда он не включен, он больше не будет отзывчивым.

Кроме того, сейчас считается лучшей практикой использовать значения em для media запросов вместо пикселей, чтобы убедиться, что ваш сайт всегда правильно масштабируется. Подробнее об этом в этой статье .

Другой совет заключается в том, что вы определяете значения запроса media в соответствии с лучшими точками останова вашего контента, а не с размерами устройства, таким образом вы также убедитесь, что ваш контент всегда будет выглядеть правильно, независимо от того, сколько новых устройств будет сделано.

Надеюсь, что это помогло 🙂

Поделиться Sara Sou     23 августа 2013 в 06:06



1

id ‘ лично используйте CSS и установите min-width и max-width. Большинство адаптивных дизайнов в наши дни используют CSS. Таким образом, если на рынке появится новое устройство, оно просто настроится в соответствии с размером экрана.

@media screen and (max-width:480px) { }
@media screen and (min-width:481px) { ) etc... etccc....

Поделиться vzeke     23 августа 2013 в 04:22



0

Я предпочитаю использовать media запроса в CSS. Просто напишите запросы после значения по умолчанию CSS…

@media screen and (max-width: 600px) { напишите здесь только те элементы, которые должны изменить код de для адаптивной производительности }

. logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}

@media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}

Не забудьте вставить код видового экрана в head/HTML.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />

Поделиться Ico Portela     24 августа 2013 в 00:05


  • HTML5 адаптивный дизайн

    Я новичок в адаптивном дизайне . Мой клиент попросил меня реализовать адаптивный дизайн, чтобы быть совместимым с поддержкой нескольких экранов и поддержкой нескольких устройств. У меня есть некоторые сомнения по поводу адаптивного дизайна : Все ли браузеры, поддерживающие HTML5, поддерживают…

  • Адаптивный веб-дизайн с использованием PrimeFaces

    Я собираюсь реализовать веб-приложение с использованием Java (JSF framework) и PrimeFaces . Я хотел бы знать, могу ли я создать резопнсивный дизайн веб-страницы с помощью PrimeFaces?



0

Я предпочитаю Twtitter начальной загрузки по сравнению с использованием CSS3 media запросы для таких различных устройств.

Поделиться Tepken Vannkorn     23 августа 2013 в 04:23



0

Попробуйте jRWD, модуль только для JavaScript, который я недавно разработал. Он использует 12 строк чистого JavaScript и 2 небольших вспомогательных функции. Он доступен на GitHub, на https://github.com/BlackMagic/jRWD .

Если вы хотите увидеть jRWD в действии, посетите http://ieee-qld.org . Обязательно проверьте исходный код. Минимальная JavaScript, минимальная CSS таблица стилей. И нет jQuery.

Поделиться BlackMagic     27 декабря 2015 в 01:33


Похожие вопросы:


Адаптивный веб-дизайн pure css centering help

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


Адаптивный дизайн для существующего веб-сайта

Какова наилучшая практика создания мобильного / планшетного сайта из существующего веб-сайта? Я исследовал адаптивный веб-дизайн, но мне кажется, что мне нужно будет воссоздать сайт с нуля, так как…


адаптивный дизайн с помощью iframe

Адаптивный дизайн на сайте, который просматривается через iframe, похоже, не работает. Я хотел бы изменить ширину css ребенка так, чтобы он подходил правильно Это то, что я пробовал: <script…


Адаптивный дизайн против адаптивного дизайна

Не могли бы вы объяснить разницу между RWD (адаптивный веб-дизайн) и AWD (адаптивный веб-дизайн) простым способом?


Jquery Mobile или адаптивный дизайн?

Я провел много исследований по созданию адаптивного дизайна. Поэтому я наткнулся на эту статью отсюда: Является ли это избыточным при использовании jQuery мобильных и адаптивных макетов /CSS media…


HTML5 адаптивный дизайн

Я новичок в адаптивном дизайне . Мой клиент попросил меня реализовать адаптивный дизайн, чтобы быть совместимым с поддержкой нескольких экранов и поддержкой нескольких устройств. У меня есть…


Адаптивный веб-дизайн с использованием PrimeFaces

Я собираюсь реализовать веб-приложение с использованием Java (JSF framework) и PrimeFaces . Я хотел бы знать, могу ли я создать резопнсивный дизайн веб-страницы с помощью PrimeFaces?


Адаптивный дизайн с изменениями в CSS в отличие от HTML

Сценарий заключается в том, что мы используем сторонний продукт CMS, который размещает около 5-6 сайтов, и на всех сайтах используется много общих компонентов. Учитывая нашу конкретную реализацию и…


Адаптивный веб-дизайн по метатегу

Я хочу знать, есть ли какой-либо способ иметь адаптивный веб-дизайн, кроме использования этого мета-тега : <meta name=viewport content=width=device-width,initial-scale=1>


Адаптивный дизайн с использованием jQuery терпит неудачу после обновления страницы

Я реализовал адаптивный дизайн на своем веб-сайте, но также применил опцию 2 languages, поэтому адаптивный дизайн не является точным после изменения языка (из-за направления текста ltr/rtl). Поэтому…

Как адаптировать шаблон

Здравствуйте уважаемые начинающие веб-мастера.

У многих из вас уже есть свои сайты, на которые потрачено много душевных сил и времени, но беда в том, что зачастую темы оформления у них не адаптивные.

Статичный шаблон сейчас — верный путь на задворки поиска, а менять тему оформления, когда уже проделана уйма работы по её усовершенствованию, и начинать всё заново — перспективка та ещё.

Ситуация не приятная, но не более, так как из неё есть вполне приемлимый выход — переделать ваш любимый статичный шаблон на адаптивный.

В предыдущих статьях раздела мы уже познакомились с основными принципами адаптивной вёрстки, теперь применим их на конкретном шаблоне.

И хотя все темы оформления отличаются друг от друга, структура у них почти одинаковая, а больше ничего и не нужно.

Для работы с дизайном нам потребуется браузерный веб-инспектор.

Вызывается он клавишей F12, но в разных браузерах немного различается, поэтому для начала посмотрим как с ним работать в Ghrome и Mozilla.

Веб-инспектор в Ghrome

Первым делом устанавливаем расположение панели. Если оно такое же как показано на рисунке, то оставляем как есть.

Если же расположение вертикальное или в диалоговом окне, то меняем.

Нужное расположение выбирается в меню «Три точки».

При этом панель можно сжать вниз и вытянуть вверх мышью.

При запущенном веб-инспекторе можно не только выявить каждый элемент и его границы на странице, но и контролировать ширину самой страницы, так как при её уменьшении в правом верхнем углу экрана появляется указатель размеров.

А это очень важно при создании адаптивного дизайна.

В Mozilla немного по другому.

Изменение расположение панели в этом браузере находится непосредственно на панели инструментов инспектора.

Активация указателя размеров происходит через опцию «Режим адаптивного дизайна».

После её активации на странице появляется вставка с кнопкой регулировки ширины страницы и окном указателя размеров.

Адаптивный дизайн лучше делать в Mozilla, так как в Ghrome была замечена некорректная работа кеша.

Отключить его в новых версиях невозможно, а чистить после каждого изменения в коде — лишняя суета.

В IE адаптивным дизайном лучше вообще не заниматься. Уж больно привередлив и неповоротлив. Достаточно будет проверить в нём результат, по завершении всех работ.

Итак, открываем веб-инспектор и первым делом изучаем структуру нашего сайта.

Смотрим какой блок основной, какие блоки вложены в него и какие вложены во вложенные.

Сделать это очень просто. Обычно панель открывается с основными блоками.

Как видите показаны DOCTYPE, html, head и body.

DOCTYPE — определяет версию html;

html — основной блок страницы, или экран монитора, планшета, смартфона;

head — блок для служебных тегов, подключений, заголовка;

body — основной блок контента с которым нам и предстоит в основном работать.

Первым делом зайдём в тег head (Внешний вид — Редактор — Заголовок (header. php)) и добавим в него мета-тег масштабирования.


<meta name="viewport" content="width=device-width, initial-scale=1" />

Всё, про блок head можно забыть.

Возвращаемся в панель инспектора и смотрим что вложено в тег body.

Для этого нужно нажать на треугольник расположенный в начале строчки. При этом весь блок body окраситься в голубой цвет, и откроются входящие в него блоки, а так же оформление заданное в файле style.css.

В стилях body нам нужно найти свойство width. В статичных шаблонах оно задано в статичных единицах.

Так как структура сайта может иметь несколько слоёв, состоящих из блоков одинакового размера, то статичная ширина может быть задана не в body, а в последующих вложениях.

Вот пример шаблона, ширина которого задана только в третьем слое — блоке div (на скрипты пока внимания не обращаем).

Определив где задана статичная ширина идём в файл стилей (Внешний вид — Редактор — Таблица стилей (style. css)), и с помощью поиска (Ctrl+F), находим нужный селектор.

Убираем width:950px; и вместо него прописываем max-width: 1340px;, или какая там у вас ширина экрана.

То есть введём ограничение по максимальной ширине, а минимальная при этом не ограничивается.

Можно задать width: 100%; тогда ваш сайт будет всегда занимать всю ширину экрана.

При таких раскладах по ширине и с мета-тегом viewport, который мы установили в теге head, текст сайта всегда будет смасштабирован по ширине экрана и его больше адаптировать не нужно.

В чём отличие max-width от width: 100%?

При создании адаптивного дизайна внимание уделяется не только маленьким экранам, но и большим, намного превышающим тот, который есть у Вас.

Текст на них смасштабирует viewport, а вот позиции блоков, таких как сайдбары, шапка сайта, изображения, вы сделать не сможете, так как не будете видать что получается.

Поэтому лучше задать ту максимальную ширину сайта, которая будет видна на вашем экране и на которой можно будет все классно разместить.

А на более широких экранах, сайт будет в меру ограничен по ширине, и тоже будет хорошо смотреться.

Нужно только задать margin: auto; первому слою (блоку) после html. Чаще всего это wrapper. Тогда сайт будет по середине.

Так, ширину сделали. Теперь, при уменьшении экрана, контент сайта не будет обрезаться, как это происходит на статичных сайта, а будет сжиматься.

И вот тут начнётся самая интересная, но и самая трудная часть работы.

Дело в том, что блоки в отличие от текста, в уменьшающемся поле, начнут менять свои позиции согласно заданным ранее стилям и приоритетам.

Начнётся полный квардак, называющийся обрушением дизайна.

Вот его мы и будем исправлять и настраивать. Дело это не сложное, но очень кропотливое, так что набирайтесь терпения.

Начинаем помаленьку сжимать страницу, внимательно следя за тем что происходит с дизайном.

Вот, например, стала рушится шапка сайта. Картинка в ней стала обрезаться, а описание полезло на заголовок.

Смотрим при какой ширине экрана начался процесс.

Затем открываем файл стилей в новой вкладке, так как вся работа будет проводиться в нём, опускаемся в самый низ, и вписываем там правило


@media screen and (max-width: 940px) {}

где

@media — указывает что для определённого типа носителя будут определённые правила;

screen — тип носителя монитор;

(max-width: 940px) — максимальная ширина монитора, на которой будет действовать данное правило;

В фигурных скобках записываются новые стили.

Обратите внимание — у правила свои фигурные скобки. В них вносятся селекторы, у которых так же есть фигурные скобки. Так что в конце каждого правила должно быть две закрывающие скобки.

Итак, правило записано, посмотрим что в него вносить.

Первым делом сосредоточимся на картинке в шапке сайта.

Очень Вам рекомендую для мобил вообще убрать картинку из шапки. Оставить только заголовок и описание.

И браузеры и операционки мобильных устройств не могут похвастаться такой мощностью, какая есть у десктопов, поэтому им тяжело будет грузить изображение. А это лишнее время на открытие страницы.

Значит вытягиваем панель веб-инспектора вверх и открывая все блоки подряд, находим где у нас расположена картинка в шапке.

Нашлась она как и положено в блоке header. Тут же смотрим какой селектор для неё прописан в файле стилей. Видим селектор #branding img со значением display: block.

Копируем #branding img, идём в файл стилей, открытый в отдельной вкладке, вызываем поиск (Ctrl+F), вводим #branding img, и вот он.

Меняем значение block на none.

И смотрим что получилось. Ага, шапка «опустела», а блоки с рекламой уползли вверх.

Так как это не посторонняя реклама, а моя, то эти блоки являются полноценными элементами разметки страницы.

То есть на вашем сайте точно так же могут уползти какие-то блоки, если им какой-то другой элемент освободит место.

Значит появились новые цели — сделать шапку более приятной глазу, инфы на ней хватает, и задать нормальное место блокам.

Для работы с шапкой находим в веб-инспекторе нужные элементы. Это #header, #site-title и #site-description.

Смотрим как называются селекторы, заданные для этих элементов, находим их в файле стилей, копируем, и в таком виде вставляем в правило @media, которое мы создали в конце файла.

Вот теперь можно менять свойства в этих селекторах так, чтобы шапка смотрелась более менее нормально.

Наведение красоты в задачу данной стать и не входит, так как сейчас надо только понять принцип создания адаптивного дизайна.

Узнать как находить элементы на странице и манипулировать ими.

Вот для примера мои изменения.

По сути, адаптивный дизайн — это новый дизайн для каждого размера, на котором этот самый дизайн не рушится.

Как только начал ломаться при дальнейшем уменьшении экрана, так на этот размер пишется своё правило, и всё перераспределяется по новой.

Следующее, что скорее всего произойдёт — это сломается горизонтальное меню.

Так как сжать его обычно не удаётся, то ему лучше задать display: none; и вместо него сделать открывающееся меню.

Затем слетят вниз сайдбары. Их можно там и оставить, а вот заголовки элементов сайдбара, можно оставить вверху, снабдив их якорной ссылкой на сам элемент.

Помните — посетителю зашедшему со смартфона глубоко плевать на красоту вашего сайта.

Ему нужен ответ на конкретный вопрос, который он ввёл в поиск. Поэтому вверх текст с информацией и самое необходимое из сайдбара.

Всё остальное под три чёрточки или три точки. Пользователи уже привыкли к тому, что под ними меню.

Если вы ещё плохо ориентируетесь в свойствах и значениях css, то вот вам ресурс htmlbook.

Просто скопируйте свойство, вставьте в поиск, и выберите там этот сайт.

Получите подробный ответ, для чего, с какими свойствами и что делает.

Желаю творческих успехов.

Адаптивный каркас сайта < < < В раздел > > > Адаптивный дизайн — легко

Как сделать адаптивный дизайн сайта и что это такое

Всем привет! Недавно, заглянув в статистику одного из своих проектов, я поняла, что пришло время учиться создавать адаптивный дизайн сайта, то есть, дизайн, который будет хорошо смотреться, как на стационарных компьютерах и ноутбуках, так и на мобильных устройствах. Взгляните сами, Метрика намекает.

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

А вы знаете, каким видят ваш сайт пользователи мобильных устройств? К счастью, для проверки есть отличный сервис — responsinator.com

Здесь все до безобразия просто — вводишь адрес сайта и видишь, как он выглядит на мобильных устройствах. Давайте для примера проверим блог, который, наверное, знаком все.


У Александра Борисова красивый шаблон, сразу видно — в дизайн и верстку вложены деньги и не маленькие. Однако, с телефона читать блог очень неудобно, и я не удивлюсь, если процент отказов среди пользователей мобильных устройств гораздо больше, чем тех, кто заходит на сайт с компьютера.

Что делать? Выхода два: оставить все как есть и наблюдать за тем, как другие проекты обходят твой в выдаче поисковых систем либо сделать дизайн своего сайта адаптивным.

Что такое адаптивный дизайн

По началу я не видела разницы между адаптивной и «резиновой» версткой, когда размеры блоков меняются в зависимости от ширины экрана. Однако, разница есть.

Адаптивный дизайн не просто тянется или сжимается по ширине, он подстраивается под размер экрана, иногда полностью меняя стиль блоков.

Самый простой пример: область контента растягивается на всю ширину экрана, а сайдбар или переносится вниз или вообще исчезает со страницы. Или меню из обычного горизонтального превращается в выпадающий список.

Как сделать адаптивный дизайн для своего сайта

В зависимости от вашего бюджета и знаний CSS/HTML, вариантов может быть несколько.

Заказать адаптивную верстку у фрилансера

Самый правильный, на мой взгляд, вариант, и он же самый непопулярный. Потому что удовольствие не из дешевых. И все же, если позволяют средства, и нет желания разбираться в тонкостях верстки, лучше найти студию или фрилансера, который адаптирует ваш шаблон под мобильные устройства или сделает новый. А как проверить его работу на устройствах с разными разрешениями, вы уже знаете — responsinator.com в помощь.

Найти готовый дизайн

В последнее время практически все дизайнеры стараются адаптировать свои шаблоны под мобильные устройства. Можно поискать готовый дизайн, например, тут:

  • www.templatemonster.com — одна из самых популярных коллекций платных шаблонов для разных CMS и просто HTML-сайтов.
  • www.templatemo.com — множество бесплатных вариантов современного дизайна.

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

Использовать фреймворки

Фреймворк (framework) — можно сказать, каркас шаблона, его основные файлы и сетка блоков. Дизайнеры любят их за удобство в работе и экономию времени, потому что готовая «рыба» шаблона позволяет не тратить время на рутину. Если вы умеете работать с фреймворками, использовать их для создания адаптивного дизайна — отличное решение.

Огромный список адаптивных фреймворков на любой вкус вы найдете на Хабре. Но большинство из них достаточно сложные в использовании и тяжелые в объеме. Поэтому тем, кто любит минимализм я рекомендую другой список легких адаптивных фреймворков от Beloweb.ru. Заодно присмотритесь к блогу, здесь очень много полезных «вкусняшек» для дизайнеров и верстальщиков.

Сделать верстку самому

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

Мета-тег viewport
Который определяет тип устройства, с которого посетитель зашел на сайт и установит верную ширину экрана. Просто скопируйте этот код в head своего сайта.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Правило @media
Благодаря которому мы можем прописать разные стили для одних и тех же блоков в своем css-файле. Выглядит это примерно так:


#left{
	width: 600px;
	float: left;
	margin-right: 10px;
	}
#right{
	width: 400px;
	float: right;
	}	
	
@media only screen and (max-width: 1010px){ 
	#left, #right{
		width: 98%;
		float: none;
		margin: 10px auto;
		}
}

В этом примере блок #left имеет ширину 600 пикселей и будет располагаться слева от блока #right шириной 400 пикселей. Но если разрешение монитора меньше 1010 пикселей, мы убираем обтекание у обоих блоков и растягиваем их на 98% ширины экрана.

И вот таким образом нужно прописать правила под следующие размеры экранов:

  • 320px дляiPhone 3-5 в вертикальном положении
  • 480px для iPhone 3-4 в горизонтальном положении
  • 568px для iPhone 5 в горизонтальном положении
  • 384px для смартфона в вертикальном положении
  • 600px для смартфона в горизонтальном положении
  • 768px для iPad в горизонтальном положении
  • 1024px для iPad в вертикальном положении

Полный список разрешений можно найти на responsinator. com или в отчете Яндекс.Метрики для вашего сайта (раздел Технологии/Разрешения дисплеев). Одним словом, тем, кто знаком с версткой сайтов, не трудно будет разобраться в этом вопросе.

Вы знаете, я редко даю ссылки на платные курсы (потому что никогда не рекомендую то, чем сама никогда не пользовалась), но это действительно лучший обучающий материал по верстке из всех, которые мне доводилось смотреть. Именно благодаря Михаилу шаблон моего блога теперь не только адаптирован под разные разрешения экрана, он стал легче предыдущего варианта и лучше оптимизирован под поисковые системы.

Кстати, если читаете статью с мобильного, напишите, все ли на месте, все ли удобно? А на сегодня все. Если у вас остались вопросы или дополнения — добро пожаловать в комментарии, они как обычно открыты для всех.

Отзывчивый дизайн — Изучение веб-разработки

На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивого) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

  • Вы могли создать жидкий сайт, который будет растягиваться чтобы заполнить окно браузера
  • или сайт с фиксированной шириной, который будет иметь фиксированный размер в пикселях.

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

Примечание: Посмотрите этот простой жидкий макет: пример, исходный код. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.

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

Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трех методов в сочетании.

  1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта — Fluid Grids (опубликовано в 2009 в A List Apart).
  2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
  3. Третьим ключевым компонентом был media query. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.

Очень важно понять, что адаптивный веб-дизайн это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и media query, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.

Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиа запросы позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

Например, следующий медиа запрос проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
} 

Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо’льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

Узнать больше о Media Query можно в документации MDN.

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.

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

В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.

target / context = result 

Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

.col {
  width: 6.25%; 
} 

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

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

На более широких экранах они премещаются в два столбца:

Современные методы макетов такие как Макет с несколькими столбцами, 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;
}

.item {
  flex: 1;
} 

Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: пример, исходный код.

CSS grid

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} 

Примечание: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

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

img {
  max-width: 100%;
} 

Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.

Отзывчивые изображения, используя элемент <picture> и атрибуты srcset и sizes элемента <img> оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

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

Вы можете найти подробное руководство по отзывчивым изображениям в разделе ищучения HTML на MDN.

Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо’льшую или меньшую площадь экрана.

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум 1200px.

html {
  font-size: 1em;
}

h2 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
} 

Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.

В мобильных версиях заголовок меньше:

На компьютерах, однако, мы видим больший размер заголовка:

Такой подход к типографии показывает, что вам не надо ограничивать media queries только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.

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.

h2 {
  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 ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

h2 {
  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.

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

<meta name="viewport" content="width=device-width,initial-scale=1">

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.

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

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.

5 инструментов для создания адаптивного дизайна, которые лучше, чем Photoshop

Photoshop – популярнейшая программа среди дизайнеров, а с такими расширениями, как CSS3Ps и FontAwesomePS это хороший инструмент для разработки прототипов веб-сайтов. Тем не менее, его создавали не для этой цели. А учитывая растущие требования к высокой адаптивности дизайна, CSS препроцессорам, CSS рамкам и независимой от разрешения графике (SVG), Photoshop теряет актуальность в сфере веб-дизайна.

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

1. WebFlow

WebFlow позволяет проектировать веб-сайты способом оперирования drag-and-drop. Этот конструктор создает макет, основанный на сетке Bootstrap и поставляется с набором таких стандартных веб-компонентов, как текстовые блоки, списки и форматирование текста, которые вы можете добавить в рабочее пространство WebFlow.

На боковой панели легко добавить стили и дополнительно настроить свойства элементов. Когда дизайн будет завершен, результаты проектирования можно экспортировать в код HTML и CSS. Также вы можете поделиться своей работой.

2. Avocode

Avocode поддерживает PSD файлы и позволяет редактировать и преобразовывать их в работоспособный сайт с HTML и CSS. Avocode извлекает все активы в ваш проект, в том числе CSS, изображения и SVG (если таковые имеются). Вы можете легко извлечь CSS в виде Less, SASS или Stylus для любого выбранного слоя с интегрированным CSSHat.

Avocode оснащен контролем версий, который позволяет вернуться к предыдущей конструкции на случай, если что-нибудь пойдет не так.

3. Macaw

Macaw позволяет создавать веб-макеты и веб-элементы, если вы работаете с таким графическим редактором, как Adobe Photoshop. Вы можете создавать столбцы или колонки, настроить их расположение и установить необходимое оформление. Macaw позволяет изменять стиль нескольких элементов в одном месте. Вы можете использовать библиотеку, чтобы хранить все элементы для их последующего использования.

Для создания адаптивного дизайна Macaw позволяет устанавливать контрольные точки и оптимизировать свой сайт для всех устройств. Когда процесс проектирования будет завершен, Macaw может сгенерировать правильный HTML и CSS.

4. Sketch

Sketch идеально подходит для проектирования интерфейсов и веб-сайтов. Этот инструмент создает векторные объекты, а не растровые. Таким образом, если вы измените размер холста, дизайн не утратит качество. Такие функции, как «built-in grid» помогут лучше организовать размещение объекта или веб-макета.

Sketch отображает шрифты, похожие на то, что показывает Webkit (вероятно, Chrome, Opera и Safari). Таким образом, вы избавитесь от беспокойства по поводу не резкого и не точного отображения текста в браузере по сравнению с оригиналом. Sketch может экспортировать CSS для каждого элемента в слое.

5. Antetype

Antetype – векторное приложение, ориентированное на визуальный дизайн, которое отлично подходит для создания таких элементов интерфейса, как градиент, тень, внутренняя тень, тень для текста, стиль границы и скругленные углы. Antetype также предоставляет сотни виджетов, которые вы можете использовать в своём проекте.

Для создания адаптивного дизайна есть возможность установить контрольные точки, которые будут регулировать размер экрана. Вы также можете экспортировать каждый элемент в виде изображения или CSS.

HTML элементов компьютерного кода


HTML содержит несколько элементов для определения пользовательского ввода и компьютерный код.



HTML

для ввода с клавиатуры

Используется элемент HTML для определения ввода с клавиатуры. Содержимое внутри отображается в браузере моноширинный шрифт по умолчанию.

Пример

Определить текст как ввод с клавиатуры в документе:

Сохраните документ, нажав Ctrl + S

результат:

Сохраните документ, нажав Ctrl + S

Попробуй сам "

HTML

для вывода программы

Элемент HTML используется для определить образец вывода из компьютерной программы.Содержимое внутри отображается в моноширинный шрифт браузера по умолчанию.

Пример

Определите некоторый текст как образец вывода компьютерной программы в документе:

Сообщение с моего компьютера:


Файл не найден.
Нажмите F1, чтобы продолжить

результат:

Сообщение с моего компьютера:

Файл не найден.
Нажмите F1, чтобы продолжить

Попробуй сам "

HTML

для компьютера: код

Используется элемент HTML для определения фрагмента компьютерного кода. Содержимое внутри отображается в моноширинный шрифт браузера по умолчанию.

Пример

Определите текст как компьютерный код в документе:


x = 5;
у = 6;
г = х + у;

результат:

х = 5; у = 6; г = х + у;

Попробуй сам "

Обратите внимание, что элемент не сохраняет лишние пробелы и разрывы строк.

Чтобы исправить это, вы можете поместить элемент внутри элемента

 : 

Пример

 

x = 5;
у = 6;
г = х + у;

результат:

х = 5;
у = 6;
г = х + у;

Попробуй сам "

HTML

для переменных

Используется элемент HTML для определения переменной в программировании или в математическом выражении.В содержимое внутри обычно отображается курсивом.

Пример

Определить текст как переменные в документе:

Площадь треугольника: 1/2 x b x h , где b - основание, а h - высота по вертикали.

результат:

Площадь треугольника: 1/2 x b x h , где b - основание, а h - высота по вертикали.

Попробуй сам "

Краткое содержание главы

  • Элемент определяет ввод с клавиатуры
  • Элемент определяет пример вывода компьютерной программы
  • Элемент определяет часть компьютерного кода
  • Элемент определяет переменную в программировании или в математическом выражении
  • Элемент
      определяет
      предварительно отформатированный текст 

Упражнения HTML


Элементы компьютерного кода HTML

Тег Описание
<код> Определяет программный код
Определяет ввод с клавиатуры
Определяет вывод компьютера
Определяет переменную
 
Определяет предварительно отформатированный текст


Адаптивный веб-дизайн - научитесь кодировать продвинутый HTML и CSS

Урок 4

В этом уроке 4
HTML
CSS
Поделиться

Интернет взлетел быстрее, чем кто-либо мог бы предположить, он растет как сумасшедший. Теперь, в последние несколько лет, на сцену резко выросла мобильная связь. Рост использования мобильного Интернета также намного опережает рост общего использования Интернета.

В наши дни трудно найти человека, у которого не было бы мобильного устройства или нескольких устройств, подключенных к Интернету. В Великобритании мобильных телефонов больше, чем людей, и, если тенденции сохранятся, использование мобильного Интернета превысит использование настольного Интернета в течение года.

С ростом использования мобильного Интернета встает вопрос о том, как создавать веб-сайты, подходящие для всех пользователей.Промышленным ответом на этот вопрос стал адаптивный веб-дизайн, также известный как RWD .

Отзывчивый обзор

Адаптивный веб-дизайн - это практика создания веб-сайта, подходящего для работы на любом устройстве и экране любого размера, независимо от размера, мобильного или настольного компьютера. Адаптивный веб-дизайн ориентирован на обеспечение интуитивно понятного и приятного опыта для всех. Пользователи настольных компьютеров и мобильных телефонов в равной степени выигрывают от адаптивных веб-сайтов.

Сам термин адаптивный веб-дизайн был придуман и в значительной степени разработан Итаном Маркоттом. Многое из того, что рассматривается в этом уроке, впервые было рассказано Итаном в сети и в его книге Responsive Web Design , которую стоит прочитать.

Фиг.4 У

Food Sense красивый веб-сайт, который реагирует на все размеры окна просмотра. Независимо от того, насколько большим или маленьким может быть окно просмотра, веб-сайт Food Sense настраивается, создавая естественный пользовательский интерфейс.

Отзывчивый vs.Адаптивный и мобильный

Для некоторых термин отзывчивый может быть не новым, а другие могут быть еще более знакомы с терминами адаптивный или мобильный . Что может заставить вас задуматься, в чем именно разница между ними.

Отзывчивый и адаптивный веб-дизайн тесно связаны и часто заменяются одним и тем же. Отзывчивый обычно означает быстрое и позитивное реагирование на любое изменение, в то время как адаптивный означает, что его можно легко модифицировать для новой цели или ситуации, например, изменения.Благодаря адаптивному дизайну веб-сайты постоянно и плавно изменяются в зависимости от различных факторов, таких как ширина области просмотра, в то время как адаптивные веб-сайты создаются с учетом группы предустановленных факторов. Комбинация обоих идеальна, обеспечивая идеальную формулу для функциональных веб-сайтов. Какой именно термин используется, не имеет большого значения.

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

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

Гибкие макеты

Адаптивный веб-дизайн разбит на три основных компонента, включая гибкие макеты, медиа-запросы и гибкие медиа.Первая часть, гибкие макеты, - это практика создания макета веб-сайта с гибкой сеткой, способной динамически изменять размер до любой ширины. Гибкие сетки строятся с использованием единиц относительной длины, чаще всего в процентах или em единиц. Эти относительные длины затем используются для объявления общих значений свойств сетки, таких как ширина , поле или заполнение .

Относительная длина области просмотра

CSS3 представил некоторые новые единицы относительной длины, в частности, связанные с размером области просмотра браузера или устройства.Эти новые блоки включают vw , vh , vmin и vmax . В целом поддержка этих новых устройств невелика, но она растет. Со временем они захотят сыграть большую роль в создании адаптивных веб-сайтов.

  • VW
    Ширина окна просмотра
  • vh
    Высота видовых экранов
  • vmin
    Минимум высоты и ширины области просмотра
  • vmax
    Максимум высоты и ширины области просмотра

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

Формула основана на делении целевой ширины элемента на ширину его родительского элемента. Результат - относительная ширина целевого элемента.

  
 1
2 
 цель ÷ контекст = результат
 

Гибкая сетка

Давайте посмотрим, как эта формула работает в макете из двух столбцов. Ниже у нас есть родительское подразделение с классом , контейнер , обертывающий как , так и раздел, помимо элементов . Цель состоит в том, чтобы секция располагалась слева и в стороне, справа, с равными полями между ними. Обычно разметка и стили для этого макета выглядят примерно так.

HTML
  
 1
2
3
4
5 
 
<раздел>...
CSS
  
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 
 .container {
  ширина: 538 пикселей;
}
раздел,
в стороне {
  маржа: 10 пикселей;
}
раздел {
  плыть налево;
  ширина: 340 пикселей;
}
в стороне {
  float: right;
  ширина: 158 пикселей;
}
 

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

  
 1
2
3
4
5
6
7
8
9
10
11
12
13 
 секция,
в стороне {
  маржа: 1.858736059%; / * 10px ÷ 538px = 0,018587361 * /
}
раздел {
  плыть налево;
  ширина: 63.197026%; / * 340px ÷ 538px =.63197026 * /
}
в стороне {
  float: right;
  ширина: 29,3680297%; / * 158 пикселей ÷ 538 пикселей = 0,293680297 * /
}
 

Принятие концепции гибкого макета и формулы и повторное их применение ко всем частям сетки позволит создать полностью динамический веб-сайт, масштабируемый до любого размера области просмотра. Для еще большего контроля в гибком макете вы также можете использовать свойства min-width , max-width , min-height и max-height .

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

Медиа-запросы были созданы как расширение для типов мультимедиа, которые обычно встречаются при нацеливании и включении стилей.Медиа-запросы предоставляют возможность указывать разные стили для конкретных условий браузера и устройства, например, ширины области просмотра или ориентации устройства. Возможность применять уникально ориентированные стили открывает мир возможностей и возможностей для адаптивного веб-дизайна.

Инициализация медиа-запросов

Существует несколько различных способов использования медиа-запросов: использование правила @media внутри существующей таблицы стилей, импорт новой таблицы стилей с использованием правила @import или создание ссылки на отдельную таблицу стилей изнутри HTML-документ.Вообще говоря, рекомендуется использовать правило @media внутри существующей таблицы стилей, чтобы избежать дополнительных HTTP-запросов.

HTML
  
 1
2
3 
 

 
CSS
  
 1
2
3
4
5
6 
 / * Правило @media * /
@media all and (max-width: 1024px) {...}

/ * Правило @import * /
@import url (styles.css) all and (max-width: 1024px) {...}
 

Каждый медиа-запрос может включать в себя тип медиа, за которым следует одно или несколько выражений. Общие типы носителей включают все , screen , print , tv и braille . Спецификация HTML5 включает новые типы мультимедиа, включая даже 3D-очки . Если тип мультимедиа не указан, мультимедийный запрос по умолчанию будет использовать тип мультимедиа , экран .

Выражение медиа-запроса, которое следует за типом медиа, может включать в себя различные медиа-функции и значения, которые затем присваиваются как истинные или ложные. Когда мультимедийной функции и значению присваивается значение true, применяются стили. Если для медиа-функции и значения присвоено значение false, стили игнорируются.

Логические операторы в медиа-запросах

Логические операторы в медиа-запросах помогают создавать мощные выражения. Для использования в медиа-запросах доступны три различных логических оператора, в том числе и , не и только .

Использование логических операторов и в медиа-запросе позволяет добавить дополнительное условие, гарантируя, что браузер или устройства будут выполнять как , так и , b , c и т. Д. Несколько отдельных медиа-запросов могут быть разделены запятыми, действуя как невысказанный оператор или . В приведенном ниже примере выбираются все типы мультимедиа от 800 до 1024 пикселей в ширину.

  
 1
2 
 @media all and (min-width: 800px) and (max-width: 1024px) {...}
 

Логический оператор , а не отменяет запрос, указывая любой запрос, кроме идентифицированного. В приведенном ниже примере выражение применяется к любому устройству, не имеющему цветного экрана. Здесь, например, применимы черно-белые или монохромные экраны.

  
 1
2 
 @media not screen and (color) {...}
 

Логический оператор only является новым оператором и не распознается пользовательскими агентами, использующими алгоритм HTML4, таким образом скрывая стили от устройств или браузеров, которые не поддерживают медиа-запросы.Ниже выражение выбирает только экраны с портретной ориентацией, на которых пользовательский агент может воспроизводить медиа-запросы.

  
 1
2 
 только экран @media и (ориентация: книжная) {...}
 
Без типа носителя

При использовании , а не и , только логических операторов , тип носителя можно не указывать. В этом случае тип носителя по умолчанию - все .

Медиа-функции в медиа-запросах

Знание синтаксиса медиа-запросов и работы логических операторов - отличное введение в медиа-запросы, но настоящая работа связана с медиа-функциями. Функции мультимедиа определяют, какие атрибуты или свойства будут использоваться в выражении мультимедийного запроса.

Высота
и ширина Характеристики материала для печати

Одна из наиболее распространенных функций мультимедиа связана с определением высоты или ширины окна просмотра устройства или браузера.Высота и ширина могут быть найдены с помощью функций мультимедиа высота и ширина . Каждая из этих медиа-функций может иметь префикс min или max квалификаторов, создавая такую ​​функцию, как min-width или max-width .

Характеристики высоты , и ширины , основаны на высоте и ширине области рендеринга области просмотра, например окна браузера. Значения для этих функций мультимедиа по высоте и ширине могут быть любой единицей длины, относительной или абсолютной.

  
 1
2 
 @media all and (min-width: 320px) и (max-width: 780px) {...}
 

В адаптивном дизайне наиболее часто используемые функции включают min-width и max-width . Они помогают создавать адаптивные веб-сайты в равной степени на настольных компьютерах и мобильных устройствах, избегая путаницы с функциями устройства.

Использование минимум
и максимум префиксов

Префиксы мин. и макс. могут использоваться для многих мультимедийных функций.Префикс min указывает значение , большее или равное , тогда как префикс max указывает значение , меньшее или равное . Использование префиксов min и max позволяет избежать конфликта с общим синтаксисом HTML, в частности, не использовать символы < и > .

Ориентация носителя

Ориентация . Функция носителя определяет, находится ли устройство в горизонтальной или книжной ориентации .Режим альбомной ориентации срабатывает, когда дисплей шире, чем выше, а режим портрет запускается, когда дисплей выше, чем шире. Эта мультимедийная функция играет большую роль в мобильных устройствах.

  
 1
2 
 @media all and (ориентация: альбомная) {...}
 
Характеристики носителя с соотношением сторон

Соотношение сторон и соотношение сторон устройства Характеристики определяют соотношение ширины / высоты пикселей целевой области рендеринга или устройства вывода.Префиксы min и max доступны для использования с различными функциями соотношения сторон, определяя соотношение выше или ниже указанного.

Значение для функции соотношения сторон состоит из двух положительных целых чисел, разделенных косой чертой. Первое целое число определяет ширину в пикселях, а второе целое число определяет высоту в пикселях.

  
 1
2 
 @media all and (min-device-aspect-ratio: 16/9) {...}
 
Pixel Ratio Характеристики мультимедиа

В дополнение к функциям мультимедиа с соотношением сторон изображения есть также функции мультимедиа с соотношением пикселей . Эти функции включают в себя функцию отношения пикселей устройства , а также префиксы мин. и макс. . В частности, функция соотношения пикселей отлично подходит для идентификации устройств высокой четкости, включая дисплеи Retina. Медиа-запросы для этого выглядят следующим образом.

  
 1
2 
 @media only screen и (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}
 
Разрешение
Media Feature

Разрешение Функция мультимедиа определяет разрешение устройства вывода в плотности пикселей, также известной как точек на дюйм или DPI . Медиа-функция с разрешением принимает префиксы мин. и макс. .Кроме того, мультимедийная функция с разрешением будет принимать точки на пиксель ( 1,3dppx ), точки на сантиметр ( 118dpcm, ) и другие значения разрешения на основе длины.

  
 1
2 
 @media print и (минимальное разрешение: 300 точек на дюйм) {...}
 
Другие мультимедийные функции

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

Поддержка браузера медиазапросов

К сожалению, медиа-запросы не работают в Internet Explorer 8 и ниже, а также в других устаревших браузерах. Однако есть пара подходящих полифиллов, написанных на Javascript.

Respond.js - это легкий полифилл, который ищет только типы мультимедиа минимальной / максимальной ширины, что идеально подходит, если используются только эти типы медиазапросов. CSS3-MediaQueries.js - это более развитый и тяжелый полифилл, предлагающий поддержку большего массива более сложных медиа-запросов.Кроме того, имейте в виду, что любой полифил может иметь проблемы с производительностью и потенциально замедлять работу веб-сайтов. Убедитесь, что любой конкретный полифилл стоит компромисса с производительностью.

Демонстрация медиа-запросов

Используя медиа-запросы, мы теперь перепишем гибкий макет, который мы создали ранее. Одна из текущих проблем в демонстрации возникает, когда боковая ширина становится бесполезно маленькой в ​​меньших окнах просмотра. Добавив медиа-запрос для видовых экранов шириной менее 420, пикселей, мы можем изменить макет, отключив поплавки и изменив ширину секции и в сторону .

  
 1
2
3
4
5
6
7 
 @media all and (max-width: 420px) {
  section, aside {
    float: нет;
    ширина: авто;
  }
}
 
Фиг.4

Без каких-либо медиа-запросов секции и в сторону становятся довольно маленькими. Возможно, он слишком мал, чтобы даже содержать реальный контент.

Фиг.4

Используя медиа-запросы для удаления поплавков и изменения их ширины, раздел и в сторону теперь могут охватывать всю ширину области просмотра, обеспечивая передышку для любого существующего контента.

Определение точек останова

Ваш инстинкт может заключаться в том, чтобы записывать точки останова медиа-запроса вокруг общих размеров области просмотра, определяемых различными разрешениями устройства, например 320px , 480px , 768px , 1024px , 1224px и т. Д. Это плохая идея.

При создании адаптивного веб-сайта он должен адаптироваться к массиву различных размеров области просмотра, независимо от устройства. Точки останова следует вводить только тогда, когда веб-сайт начинает ломаться, выглядит странно или затрудняется работа.

Кроме того, все время выпускаются новые устройства и разрешения. Попытка не отставать от этих изменений может оказаться бесконечным процессом.

Mobile First

Один из популярных методов использования медиа-запросов называется сначала мобильный . Подход, ориентированный на мобильные устройства, включает использование стилей, нацеленных на меньшие области просмотра, в качестве стилей по умолчанию для веб-сайта, а затем использование медиа-запросов для добавления стилей по мере увеличения области просмотра.

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

Подход «сначала мобильные» также поддерживает проектирование с учетом ограничений мобильного пользователя. Вскоре большая часть использования Интернета будет осуществляться на мобильных устройствах. Планируйте их соответствующим образом и развивайте собственный мобильный опыт.

Ряд мобильных медиа-запросов в первую очередь может выглядеть примерно так.

  
 1
2
3
4
5
6 
 / * Сначала стили по умолчанию, затем медиа-запросы * /
@media screen и (min-width: 400px) {...}
@media screen и (min-width: 600px) {...}
@media screen и (min-width: 1000 пикселей) {...}
@media screen и (min-width: 1400px) {...}
 

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

  
 1
2
3
4
5
6
7
8
9
10
11 
 / * Носитель по умолчанию * /
тело {
  фон: #ddd;
}
/ * Медиа для больших устройств * /
@media screen и (min-width: 800px) {
  тело {
    фоновое изображение: url ("bg.png") 50% 50% без повтора;
  }
}
 

Мобильная первая демонстрация

Добавляя медиа-запросы к нашему предыдущему примеру, мы переписали несколько стилей, чтобы иметь лучший макет на видовых экранах шириной менее 420 пикселей.Переписав этот код, чтобы сначала использовать мобильные стили по умолчанию, а затем добавив медиа-запросы для настройки для видовых экранов шириной более 420 пикселей, мы построим следующее:

  
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 
 секция,
в стороне {
  маржа: 1.858736059%;
}
@media all and (min-width: 420px) {
  .container {
    максимальная ширина: 538 пикселей;
  }
  раздел {
    плыть налево;
    ширина: 63.197026%;
  }
  в стороне {
    float: right;
    ширина: 29.3680297%;
  }
}
 

Обратите внимание, это то же количество кода, что и раньше. Единственным исключением является то, что мобильные устройства должны отображать только и одно объявление CSS . Все остальные стили откладываются, загружаются только на больших окнах просмотра и без перезаписи исходных стилей.

Окно просмотра

В наши дни мобильные устройства обычно неплохо справляются с отображением веб-сайтов. Иногда им может понадобиться небольшая помощь, особенно при определении размера области просмотра, масштаба и разрешения веб-сайта.Чтобы исправить это, Apple изобрела метатег viewport .

Фиг.4

Хотя в этой демонстрации есть медиа-запросы, многие мобильные устройства по-прежнему не знают исходную ширину или масштаб веб-сайта. Следовательно, они не могут прерывать медиа-запросы.

Высота видового экрана
и Ширина

Использование метатега viewport со значениями height или width будет определять высоту или ширину окна просмотра соответственно.Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принято значение device-height , а для свойства width принято ключевое слово device-width . Использование этих ключевых слов унаследует значения высоты и ширины устройства по умолчанию.

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

  
 1
2 
 
 
Фиг.4

Предоставление устройствам информации о предполагаемой ширине веб-сайта, в данном случае ширине устройства , позволяет правильно изменять размер веб-сайта и обрабатывать любые соответствующие медиа-запросы.

Масштаб видового экрана

Чтобы контролировать, как веб-сайт масштабируется на мобильном устройстве, и как пользователи могут продолжать масштабировать веб-сайт, используйте свойства с минимальным масштабом , с максимальным масштабом , с начальным масштабом и , масштабируемые пользователем .

Начальный масштаб веб-сайта должен быть установлен на 1 , поскольку это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, это будет соотношение между шириной устройства и размером области просмотра. Значения для начального масштаба всегда должны быть положительным целым числом от 0 до 10 .

  
 1
2 
 
 
Рис.4

Использование целого числа выше 1 увеличит масштаб веб-сайта до масштаба по умолчанию. Обычно это значение устанавливается равным 1 .

Значения минимального масштаба и максимального масштаба определяют, насколько маленьким и большим может быть масштабирование области просмотра. При использовании с минимальным масштабом значение должно быть положительным целым числом, меньшим или равным исходному значению . Используя те же рассуждения, значение максимального масштаба должно быть положительным целым числом, большим или равным начальному значению масштаба .Значения для обоих из них также должны находиться в диапазоне от 0 до 10 .

  
 1
2 
 
 

Вообще говоря, эти значения не должны быть установлены на то же значение, что и исходная шкала . Это отключит любое масштабирование, которое может быть выполнено вместо этого, используя масштабируемое пользователем значение .Установка для масштабируемого пользователем значения на без отключит любое масштабирование. В качестве альтернативы, установка масштабируемого пользователем значения на да включит масштабирование.

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

  
 1
2 
 
 
Разрешение области просмотра

Разрешение браузеру решать, как масштабировать веб-сайт на основе любых значений масштаба области просмотра, обычно помогает.Когда требуется больший контроль, в частности, над разрешением устройства, можно использовать значение target-densitydpi . Область просмотра target-densitydpi принимает несколько значений, включая device-dpi , high-dpi , medium-dpi , low-dpi или фактическое число точек на дюйм.

Использование target-densitydpi Значение области просмотра редко, но чрезвычайно полезно, когда требуется пиксельное управление.

  
 1
2 
 
 
Объединение значений области просмотра

Мета-тег области просмотра принимает как отдельные значения, так и несколько значений, что позволяет одновременно устанавливать несколько свойств области просмотра.Установка нескольких значений требует разделения их запятой в пределах значения атрибута content . Одно из рекомендуемых значений области просмотра показано ниже с использованием свойств width и с начальным масштабом .

  
 1
2 
 
 
Фиг.4

Комбинация width = device-width и initial-scale = 1 обеспечивает обычно требуемый начальный размер и масштаб.

Правило области просмотра CSS

Поскольку метатег области просмотра так сильно вращается вокруг установки стилей отображения веб-сайта, было рекомендовано переместить область просмотра из метатега с HTML в правило @ в CSS. Это помогает отделить стиль от содержимого, обеспечивая более семантический подход.

В настоящее время в некоторых браузерах уже реализовано правило @viewport , однако его поддержка по всем направлениям невелика.Ранее рекомендованный метатег viewport выглядел бы как следующее правило @viewport в CSS.

  
 1
2
3
4
5 
 @viewport {
  ширина: ширина устройства;
  масштабирование: 1;
}
 

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

Один из быстрых способов сделать носитель масштабируемым - использовать свойство max-width со значением 100% . Это гарантирует, что по мере уменьшения области просмотра любой носитель будет уменьшаться в соответствии с шириной своих контейнеров.

  
 1
2
3
4 
 img, video, canvas {
  максимальная ширина: 100%;
}
 

Гибкие встроенные носители

К сожалению, свойство max-width не работает для всех экземпляров мультимедиа, особенно для iframe s и встроенных мультимедиа.Когда дело доходит до сторонних веб-сайтов, таких как YouTube, которые используют фреймы для встроенных мультимедиа, это огромное разочарование. К счастью, есть обходной путь.

Чтобы встроенное мультимедиа было полностью отзывчивым, встроенный элемент должен быть абсолютно позиционирован внутри родительского элемента. Родительский элемент должен иметь ширину 100% , чтобы он мог масштабироваться в зависимости от ширины области просмотра. Родительский элемент также должен иметь высоту 0 для запуска механизма hasLayout в Internet Explorer.

Padding затем присваивается нижней части родительского элемента, значение которого устанавливается в том же соотношении сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните предыдущую формулу адаптивного дизайна? Если видео имеет соотношение сторон 16: 9, 9 , разделенное на 16 , будет равно .5625 , таким образом, требуется заполнение снизу 56,25% . Отступы снизу, а не сверху используются специально для предотвращения Internet Explorer 5.5 от разрушения и рассматривает родительский элемент как абсолютно позиционированный элемент.

HTML
  
 1
2
3
4 
 <рисунок>
  

 
CSS
  
 1
2
3
4
5
6
7
8
9
10
11
12
13
14 
 рисунок {
  высота: 0;
  обивка-дно: 56.25%; / * 16: 9 * /
  положение: относительное;
  ширина: 100%;
}
iframe {
  высота: 100%;
  слева: 0;
  позиция: абсолютная;
  верх: 0;
  ширина: 100%;
}
 
Демонстрация гибких встроенных носителей

По соображениям безопасности CodePen не допускает использование iframe во встроенных примерах кода, однако вы можете просмотреть и отредактировать этот код на их веб-сайте.

Контейнер шириной 100%
Контейнер шириной 75%

Контейнер шириной 50%

Ресурсы

и Ссылки

Учебник по адаптивному дизайну - Изучите адаптивный веб-дизайн за 5 минут

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

  • Относительные блоки CSS
  • Медиа-запросы
  • Flexbox
  • Адаптивная типографика

Если вы хотите глубже погрузиться в тему, вы можете посетить наш учебный курс для адаптивных веб-разработчиков на Scrimba, который позволит вам создавать адаптивные веб-сайты на профессиональном уровне.

А пока начнем с основ!

Относительные единицы CSS

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

Наиболее распространенными являются:

В этой статье мы начнем с процентной единицы % , а затем в последнем разделе мы рассмотрим единицу rem .

Допустим, у вас очень простой веб-сайт, например:

Его HTML-код выглядит следующим образом:

  
    

Добро пожаловать на мой сайт

Как вы можете видеть из GIF ниже, наше изображение по умолчанию будет иметь фиксированную ширину:

Это не особенно отзывчиво, поэтому давайте изменим его на 70 процентов. Мы просто сделаем следующее:

  .myImg {
    ширина: 70%;
}
  

Устанавливает ширину изображения на 70 процентов от ширины его родительского тега . Поскольку тег занимает всю ширину экрана, изображение всегда будет занимать 70 процентов экрана.

Вот результат:

И вот насколько легко создать адаптивное изображение!

Однако у нас есть одна проблема с нашим адаптивным макетом: он выглядит странно на очень маленьких экранах. Ширина 70% предназначена для сужения при просмотре на мобильном устройстве. Посмотрите сами:



Сделать это лучше в этой ситуации - идеальная задача для медиа-запросов. Они позволяют применять различные стили, например, в зависимости от ширины экрана.Мы можем в основном сказать , если ширина экрана меньше 768 пикселей, используйте другой стиль.

Вот как мы создаем медиа-запрос в CSS:

  @media (max-width: 768px) {
    .myImage {
        ширина: 100%
    }
}
  

Этот блок CSS будет применяться только в том случае, если ширина экрана меньше 768 пикселей.

Вот результат:

Как видите, на странице есть точка останова, при которой изображение внезапно становится шире. Это когда ширина браузера 768 пикселей, а изображение переключается между 70% и 100% .

Использование Flexbox для панели навигации

Далее идет Flexbox. Вы просто не сможете узнать о быстродействии, не изучив Flexbox. Он изменил игру с адаптивным дизайном, когда она была представлена ​​несколько лет назад, поскольку она значительно упрощает адаптивное позиционирование элементов вдоль оси.

Чтобы использовать Flexbox, мы немного усложним наш сайт, добавив панель навигации над заголовком. Вот HTML для этого:

  
  

По умолчанию это будет выглядеть так.



Все наши элементы навигации втиснуты в левую часть, а это не то, что нам нужно. Мы хотим, чтобы они были равномерно распределены по всей странице.

Для этого мы просто превратим контейнер навигации в гибкий бокс, а затем воспользуемся волшебным свойством justify-content .

  nav {
    дисплей: гибкий;
    justify-content: пространство вокруг;
}
  

display: flex превращает