Адаптивный сайт: Что такое адаптивный дизайн, и почему адаптивная верстка сайта дороже?

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

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

 : 

 Пример 

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



 
 11 убедительных примеров адаптивного веб-дизайна 
 
 Еще в 2010 году Итан Маркотт призвал дизайнеров и разработчиков практиковать «адаптивный веб-дизайн» (RWD): 
 «Вместо того, чтобы приспосабливать отдельные проекты к каждому из постоянно растущего числа веб-устройств, мы можем рассматривать их как аспекты одного и того же опыта.Мы можем [сделать наши] дизайны […] более адаптивными к средствам массовой информации, которые их визуализируют ». 
 Создавая веб-сайты, которые адаптируются к любому устройству, дизайнеры и разработчики могут обеспечить перспективу своей работы, утверждал он. 
  Связанные: 9 примеров умных, креативных 404 страниц  
 Восемь лет спустя адаптивный веб-дизайн достиг критической массы. В настоящее время стандартной практикой является создание согласованного, но индивидуального интерфейса для всех устройств, в том числе для тех, которые еще не выпущены.
 Но что такое адаптивный веб-дизайн? И каковы лучшие примеры мобильного адаптивного веб-дизайна на практике? 
 
 «На мобильные телефоны и планшеты приходится 56,74% глобального использования Интернета». 
 
 Что такое адаптивный веб-сайт? 
 Строго говоря, адаптивные веб-сайты имеют три определяющие особенности: 
 «Медиа-запрос позволяет нам ориентироваться не только на определенные классы устройств, но и на самом деле проверять физические характеристики устройства, выполняющего нашу работу», - объясняет Маркотт.
Таким образом, медиа-запросы 
 позволяют разработчикам использовать проверку условий для изменения веб-дизайна в зависимости от свойств устройства пользователя. Это лучше, чем простое определение точек останова в HTML / CSS, так как это более удобный интерфейс для пользователя. 
 Когда гибкие сетки создаются с помощью CSS, столбцы автоматически меняются, чтобы соответствовать размеру экрана или окна браузера, независимо от того, находится ли пользователь на 21-дюймовом настольном компьютере, 13-дюймовом ноутбуке, 9,7-дюймовом планшете или а 5.5-дюймовый мобильный телефон. 
 «Гибкие макеты [….] Надежно передают контроль над нашими проектами в руки наших пользователей и их привычек просмотра», - объясняет Маркотт. 
 Это позволяет дизайнерам поддерживать единообразный внешний вид на нескольких устройствах. Кроме того, это экономит время и деньги, позволяя дизайнерам обновлять одну версию веб-сайта вместо многих. 
 Marcotte здесь говорит об использовании кода, который предотвращает превышение размеров мультимедийных файлов размеров их контейнеров, а также окон просмотра.По его словам, «гибкий контейнер изменяет свой размер», так же как и изображение внутри него. 
 Учитывая, что сегодня существует более 8,48 млрд уникальных устройств, эта функциональность позволяет командам создавать неподвластные времени дизайны, способные адаптироваться к любому устройству, независимо от его размера или формы. 
 Вместе эти три типа функциональности позволяют дизайнерам создавать адаптивные веб-сайты. 
  Связано: Типографика и создание сеток для экранов  
 Но, объясняет Маркотт, это только начало: 
 «Гибкие сетки, гибкие изображения и медиа-запросы - три технических компонента адаптивного веб-дизайна, но они также требуют иного мышления.Вместо того, чтобы помещать наш контент на карантин в разрозненные, зависящие от устройства возможности, мы можем использовать медиа-запросы для постепенного улучшения нашей работы в различных контекстах просмотра ». 
 Ниже мы привели 11 примеров, которые выходят за рамки основных критериев адаптивного веб-дизайна. Каждый веб-сайт предлагает возможности, адаптированные к уникальному контексту пользователя. 
 Примеры адаптивного веб-дизайна 
 Dropbox отлично справился с использованием гибкой сетки и гибких визуальных элементов для создания выдающегося адаптивного веб-сайта.Меняется не только цвет шрифта в соответствии с цветом фона при переходе с рабочего стола на карманные устройства, но и изображение меняет ориентацию. 
 С учетом контекста Dropbox предлагает индивидуальный подход к каждому устройству. Например, чтобы предотвратить подпрыгивание пользователей, небольшая стрелка указывает пользователям настольных компьютеров прокрутить вниз, чтобы увидеть больше контента. Такая же стрелка отсутствует на портативных устройствах, поскольку предполагается, что пользователи будут выполнять прокрутку на устройстве с сенсорным экраном.Точно так же их форма регистрации видна на настольных устройствах, но скрыта за кнопкой с призывом к действию на планшетах и ​​мобильных устройствах, где пространство ограничено. 
Веб-сайт 
 Dribbble отличается одним из отличительных признаков адаптивного веб-дизайна: гибкой сеткой, которая сокращается с пяти столбцов на настольных компьютерах и портативных компьютерах до двух столбцов на планшетах и ​​мобильных телефонах. 
 Чтобы не перегружать свой веб-сайт на мобильных устройствах, Dribbble удалила несколько элементов. Например, снимки больше не приписываются их создателю, а количество просмотров, комментариев и лайков больше не вкладывается под каждый элемент.Они также скрыли меню за значком гамбургера и убрали строку поиска. 
Веб-сайт 
 GitHub предлагает единообразную работу на всех устройствах. Однако было несколько заметных отличий: 
 
 При переходе с настольных устройств на планшеты область над сгибом меняется с макета с двумя столбцами на макет с одним столбцом, причем копия находится над формой регистрации, а не рядом с ней. 
 В отличие от настольных и планшетных устройств, где форма регистрации находится в центре внимания, GitHub представляет только кнопку с призывом к действию на мобильных устройствах.Пользователи должны щелкнуть призыв к действию, чтобы открыть форму. 
 Как и Dribbble, GitHub также удалил панель поиска и скрыл меню за значком гамбургера на портативных устройствах. Это довольно распространенная практика, поскольку она помогает уменьшить беспорядок на мобильных устройствах, где пространство ограничено. 

 Это еще один фантастический пример адаптивного мобильного веб-дизайна. Их веб-сайт загружается на удивление быстро, за четыре секунды, при использовании подключения 3G. Что еще более важно, внешний вид веб-сайта Klientboost остается неизменным на всех устройствах, но им удалось адаптировать пользовательский интерфейс к каждому устройству.
 В то время как полное меню, включая кнопку с призывом к действию «Получить предложение» и «Мы нанимаем!» выноска, которую можно просматривать с настольных и портативных компьютеров, планшетов и мобильных устройств, открывает сокращенные версии меню. Пользователям, посещающим свой веб-сайт с планшетных устройств, отображается значок гамбургер-меню и выноска, а тем, кто посещает их с мобильных телефонов, - значок меню и кнопка с призывом к действию. 
Компания 
 Magic Leap разработала простой, ориентированный на мобильные устройства веб-сайт с параллакс-прокруткой, который оживляет их потрясающие иллюстрации.Учитывая, что на мобильные телефоны и планшеты сейчас приходится 56,74% глобального использования Интернета, их подход имеет смысл. 
Пользовательский интерфейс 
 Magic Leap единообразен на всех устройствах, за одним исключением: микрокопия, которая направляет пользователей на прокрутку, которая есть на настольных компьютерах и планшетах, но исключена на мобильных устройствах, где пользователям естественно выполнять прокрутку. 
 Даже с подключением к сети 3G их веб-сайт загружается за семь секунд, что значительно ниже среднемирового показателя (22 секунды).Для веб-сайта с адаптивной анимацией это не так уж плохо. 
Пользовательский интерфейс 
 Shopify одинаков на всех устройствах. Только кнопка с призывом к действию и иллюстрации изменились между настольными и мобильными устройствами. 
 На персональных компьютерах и планшетах кнопка призыва к действию находится справа от поля формы. На мобильных устройствах это ниже. 
 Аналогичным образом, иллюстрации расположены справа от копии на персональных компьютерах и планшетах, тогда как на мобильных устройствах они расположены под копией.
 Как и на большинстве веб-сайтов, меню Shopify также заменено значком гамбургера на портативных устройствах. 
 Несмотря на то, что они используют карусели изображений для демонстрации своих клиентов, им удалось сохранить скорость загрузки страницы ниже пяти секунд, что довольно впечатляет. 
 Smashing Magazine делает все возможное, предлагая индивидуальный подход к каждому устройству. Их веб-сайт имеет макет с двумя столбцами, полное меню и комбинированный знак на рабочем столе, который преобразуется в макет с одним столбцом и сжатое меню с буквенным знаком на планшетах и ​​мобильных устройствах.
Веб-сайт 
 Smashing Magazine также является ярким примером инклюзивного дизайна. Меню, показываемое пользователям настольных компьютеров, содержит как ярлыки, так и значки. И мне нравится, что вместо обычного значка меню они выбрали кнопку с призывом к действию со словом «меню» и значком поиска. У цифровых аборигенов нет проблем с навигацией по веб-сайтам с портативных устройств, но другие поколения не обязательно знают, что представляют собой значки-гамбургеры. 
 Их веб-сайт также загружается всего за 2 секунды на устройствах с 3G-Интернетом, что, по словам GSMA, будет составлять 70% мобильных подключений до 2020 года.Это снижает показатель отказов и не дает пользователям расстраиваться. 
Бренд 
 Slack известен своей простотой и человечностью. Неудивительно, что их веб-сайт следует тем же правилам. 
 Их гибкая сетка легко адаптируется к видовым экранам всех размеров и форм. Например, на настольных и портативных компьютерах логотипы клиентов представлены в виде трех столбцов, а на портативных устройствах - в виде одного столбца. 
  По теме: Загрузите 25 бесплатных смайликов Slack, которые ваша команда разработчиков понятия не имела  
Веб-сайт 
 Slack также разработан таким образом, чтобы его было легко использовать.Например, их кнопки с призывом к действию охватывают весь столбец на планшетах и ​​мобильных телефонах, что помогает пользователям не нажимать на гиперссылку «Войти» ниже. 
 Treehouse предлагает безупречный опыт работы на всех платформах. Их меню становится все меньше на разных устройствах: настольные и портативные компьютеры имеют меню из четырех пунктов, планшеты - меню из двух пунктов и значок гамбургера, а мобильные телефоны предлагают меню и значок из одного пункта. 
 Их поля формы претерпевают такие же изменения.Они представлены в двух колонках для настольных и портативных компьютеров и в одной колонке для планшетов и мобильных телефонов. 
 Как и другие компании, WillowTree включает полное меню на настольных устройствах и сжатое меню на портативных устройствах. Но в отличие от других, они представили статическую панель навигации в верхней части страницы, которая создает более приятный опыт для пользователей портативных устройств. Они также добавили текстовый призыв к действию в мобильной версии своего веб-сайта для дополнительного удобства.
 Как и на других адаптивных веб-сайтах, сетка, созданная для отображения логотипов клиентов, чрезвычайно гибкая. Он сворачивается с пяти столбцов на настольных компьютерах до четырех столбцов на планшетах и ​​до двух столбцов на мобильных телефонах. 
 Как и в Treehouse, область над сгибом преобразуется из двух столбцов на рабочем столе в один столбец на мобильном устройстве, при этом кнопка с призывом к действию перемещается из-за копии в нижнюю. 
Веб-сайт 
 WIRED имеет динамический макет с несколькими столбцами и боковой панелью на настольных устройствах, которая преобразуется в один столбец на портативных устройствах.
 При переходе с планшета на мобильное устройство их меню сжимается и включает только их логотип, значок меню и ссылку для подписки. Чтобы упростить задачу, на мобильных устройствах недоступны функции поиска и возможность фильтровать новостную ленту WIRED по разделам. 
 Одна из областей, где лучше всего проявляется WIRED, - это использование гибких изображений. Обрезка их изображений функций меняется на разных платформах. На настольных компьютерах и портативных компьютерах изображения могут быть квадратными и прямоугольными, что дает пользователям возможность исследовать их глазами.Тем не менее, на портативных устройствах все изображения функций обрезаются с соотношением сторон 16: 9. 
 Какой ваш любимый адаптивный веб-сайт? 
 Сообщите нам, и мы, возможно, включим это в будущий пост об адаптивном дизайне. 
 Адаптивный дизайн - Изучите веб-разработку 
 На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера, чем ожидал дизайнер, результаты варьировались от нежелательных полос прокрутки до слишком длинной строки и плохого использования пространства.По мере того, как стали доступны более разнообразные размеры экранов, появилась концепция адаптивного веб-дизайна   (RWD), набор методов, которые позволяют веб-страницам изменять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т. Д. изменили наш подход к дизайну для сети с несколькими устройствами, и в этой статье мы поможем вам понять основные методы, которые вам нужно знать, чтобы овладеть им. 
 В какой-то момент истории у вас было два варианта разработки веб-сайта: 
 
 Вы можете создать  жидкий сайт , который будет растягиваться, чтобы заполнить окно браузера 
 или  сайт с фиксированной шириной , который будет фиксированным размером в пикселях.
 
 Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт привел к сплющенному дизайну на экранах меньшего размера (как показано ниже) и нечитаемо длинным линиям на экранах большего размера. 
  Примечание : См. Этот простой жидкий макет: пример, исходный код. При просмотре примера перетаскивайте окно браузера внутрь и наружу, чтобы увидеть, как оно выглядит при разных размерах. 
 Сайт фиксированной ширины рисковал иметь горизонтальную полосу прокрутки на экранах, меньших ширины сайта (как показано ниже), и много белого пространства по краям дизайна на больших экранах.
  Примечание : См. Этот простой макет с фиксированной шириной: пример, исходный код. Опять же, наблюдайте за результатом при изменении размера окна браузера. 
 Когда мобильный Интернет начал становиться реальностью с появлением первых функциональных телефонов, компании, которые хотели использовать мобильные устройства, обычно создавали специальную мобильную версию своего сайта с другим URL-адресом (часто что-то вроде  m.example.com  или  example.mobi ). Это означало, что необходимо было разработать и поддерживать в актуальном состоянии две отдельные версии сайта.
 Кроме того, эти мобильные сайты часто предлагали очень урезанный опыт. По мере того, как мобильные устройства становились все более мощными и могли отображать веб-сайты целиком, это расстраивало мобильных пользователей, которые оказались в ловушке мобильной версии сайта и не смогли получить доступ к информации, которая, как они знали, была в полнофункциональной настольной версии сайта. 
 
 Было разработано несколько подходов, чтобы попытаться устранить недостатки жидких или фиксированных методов создания веб-сайтов. В 2004 году Кэмерон Адамс написал пост под названием «Макет, зависящий от разрешения», описывающий метод создания дизайна, который можно адаптировать к разным разрешениям экрана.Этот подход требовал JavaScript для определения разрешения экрана и загрузки правильного CSS. 
 Зои Микли Гилленуотер сыграла важную роль в ее работе по описанию и формализации различных способов создания гибких сайтов, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером. 
 
 Термин адаптивный дизайн был придуман Итаном Маркоттом в 2010 году и описывал использование трех техник в сочетании. 
 
 Первой была идея жидкостных решеток, которая уже была исследована Гилленуотером, и ее можно прочесть в статье Маркотта "Флюидные сетки" (опубликованной в 2009 году в A List Apart).
 Вторая техника заключалась в создании жидких изображений. Используя очень простую технику установки для свойства  max-width  значения  100% , изображения будут уменьшаться до меньшего размера, если их содержащий столбец станет уже, чем внутренний размер изображения, но никогда не станет больше. Это позволяет изображению уменьшаться, чтобы поместиться в столбец гибкого размера, а не переполнять его, но не увеличиваться в размерах и не становиться пикселизированными, если столбец становится шире изображения. 
 Третьим ключевым компонентом был медиа-запрос.Медиа-запросы позволяют переключать тип макета, который Кэмерон Адамс ранее исследовал с помощью JavaScript, используя только CSS. Вместо того, чтобы иметь один макет для всех размеров экрана, макет можно изменить. Боковые панели можно переместить для меньшего экрана или отобразить альтернативную навигацию. 
 
 Важно понимать, что адаптивный веб-дизайн  не является отдельной технологией  - это термин, используемый для описания подхода к веб-дизайну или набора передовых практик, используемых для создания макета, который  может отвечать  на устройство, используемое для просмотра содержимого.В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием чисел с плавающей запятой) и медиа-запросы, однако за почти 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала по умолчанию. Современные методы макета CSS по своей сути являются адаптивными, и у нас есть новые функции, встроенные в веб-платформу, чтобы упростить разработку адаптивных сайтов. 
 Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта. 
 
 Адаптивный дизайн появился только благодаря медиа-запросу.Спецификация Media Queries Level 3 стала кандидатом в рекомендацию в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиа-запросы позволяют нам запускать серию тестов (например, является ли экран пользователя больше определенной ширины или определенного разрешения) и выборочно применять CSS для стилизации страницы в соответствии с потребностями пользователя. 
 Например, следующие медиа-запросы проверяют, отображается ли текущая веб-страница как экранный носитель (следовательно, не как печатный документ), а ширина области просмотра составляет не менее 800 пикселей.CSS для селектора  .container  будет применяться только в том случае, если эти два условия верны. 
  @media screen и (min-width: 800px) {
  .container {
    маржа: 1em 2em;
  }
}
  
 Вы можете добавить несколько медиа-запросов в таблицу стилей, настроив весь макет или его части, чтобы они наилучшим образом соответствовали разным размерам экрана. Точки, в которых вводится медиа-запрос и изменяется макет, известны как точки останова  .
 Распространенным подходом при использовании Media Queries является создание простого одностолбцового макета для устройств с узким экраном (например,g), затем проверьте наличие больших экранов и реализуйте макет с несколькими столбцами, если вы знаете, что у вас достаточно ширины экрана, чтобы справиться с этим. Это часто описывается как  мобильный первый дизайн .
 Дополнительные сведения см. В документации MDN для запросов мультимедиа.
 Адаптивные сайты не просто меняют макет между точками останова, они построены на гибких сетках. Гибкая сетка означает, что вам не нужно настраивать таргетинг на все возможные размеры устройств и создавать для них идеальный макет.Такой подход был бы невозможен, учитывая огромное количество существующих устройств разного размера и тот факт, что, по крайней мере, на настольных компьютерах люди не всегда открывают окно браузера до максимума.
 Используя гибкую сетку, вам нужно только добавить точку останова и изменить дизайн в той точке, где содержимое начинает выглядеть плохо. Например, если длина строки становится нечитаемой по мере увеличения размера экрана, или при сужении прямоугольник сжимается с двумя словами на каждой строке.
 На заре создания адаптивного дизайна единственным вариантом создания макета было использование плавающих элементов.Гибкие плавающие макеты были достигнуты за счет указания ширины каждого элемента в процентах и ​​обеспечения того, чтобы итоговые значения по макету не превышали 100%. В своей оригинальной статье о подвижных сетках Маркотт подробно описал формулу для преобразования макета, разработанного с использованием пикселей, в проценты.
  цель / контекст = результат 
 
 Например, если размер нашего целевого столбца составляет 60 пикселей, а контекст (или контейнер), в котором он находится, составляет 960 пикселей, мы делим 60 на 960, чтобы получить значение, которое мы можем использовать в нашем CSS, после перемещения десятичной точки на два разряда. Направо.
 Этот подход сегодня можно найти во многих местах в Интернете, и он задокументирован здесь, в разделе макета нашей статьи о методах макета прежних версий. Скорее всего, вы столкнетесь с веб-сайтами, использующими этот подход в своей работе, поэтому стоит понять его, даже если вы не станете создавать современный сайт с использованием гибкой сетки на основе плавающих элементов.
 В следующем примере демонстрируется простой адаптивный дизайн с использованием Media Queries и гибкой сетки. На узких экранах макет отображает коробки, расположенные друг над другом:
 На более широких экранах они перемещаются в две колонки:
 Современные методы макета, такие как макет с несколькими столбцами, Flexbox и Grid, по умолчанию являются адаптивными.Все они предполагают, что вы пытаетесь создать гибкую сетку, и предлагают более простые способы сделать это.
 Multicol 
 Самый старый из этих методов компоновки - multicol - когда вы указываете  столбцов с количеством столбцов , это указывает, на сколько столбцов вы хотите разделить ваш контент. Затем браузер определяет их размер, который будет меняться в зависимости от размера экрана.
  .container {
  количество столбцов: 3;
}
  
 Если вместо этого вы указываете  ширины столбца , вы указываете минимальную ширину  .Браузер создаст столько столбцов этой ширины, сколько удобно помещается в контейнер, а затем разделит оставшееся пространство между всеми столбцами. Поэтому количество столбцов будет меняться в зависимости от того, сколько места есть.
  .container {
  ширина столбца: 10em;
}
  
 Flexbox 
 В Flexbox элементы гибкости будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере, что является их исходным поведением. Изменяя значения для  flex-grow  и  flex-shrink , вы можете указать, как вы хотите, чтобы элементы вели себя, когда они сталкиваются с большим или меньшим пространством вокруг них.
 В приведенном ниже примере каждый из гибких элементов будет занимать равное количество места в гибком контейнере, используя сокращение  flex: 1 , как описано в теме макета Flexbox: гибкие размеры гибких элементов.
  .container {
  дисплей: гибкий;
}

.элемент {
  гибкость: 1;
}
  
  Примечание : В качестве примера мы перестроили простой адаптивный макет выше, на этот раз с использованием flexbox. Вы можете видеть, что нам больше не нужно использовать странные процентные значения для расчета размера столбцов: пример, исходный код.
 CSS grid 
 В CSS Grid Layout модуль  fr  позволяет распределять доступное пространство по дорожкам сетки. В следующем примере создается сетка-контейнер с тремя дорожками размером  1fr . Это создаст три дорожки для столбцов, каждая из которых займет одну часть доступного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Learn Layout Grids в разделе «Гибкие сетки с единицей fr».
  .container {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 1fr 1fr;
}
  
  Примечание : Версия макета сетки еще проще, поскольку мы можем определять столбцы в файле.оболочка: пример, исходный код.
 Простейший подход к адаптивным изображениям описан в ранних статьях Маркотта об адаптивном дизайне. По сути, вы должны взять изображение максимального размера, который может потребоваться, и уменьшить его. Этот подход все еще используется сегодня, и в большинстве таблиц стилей вы найдете где-то следующий CSS:
 У этого подхода есть очевидные недостатки. Изображение может отображаться намного меньше, чем его собственный размер, что является пустой тратой полосы пропускания - мобильный пользователь может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера.Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на настольном компьютере. Например, было бы неплохо иметь квадратное изображение для мобильных устройств, но показывать ту же сцену, что и пейзажное изображение на рабочем столе. Или, учитывая меньший размер изображения на мобильном устройстве, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Этого нельзя добиться за счет уменьшения изображения.
 Адаптивные изображения с использованием элемента    и     srcset  и  размеров  атрибутов решают обе эти проблемы.Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение размера. подходит для устройства, которое они используют.
 Вы также можете  напрямую направить  изображений, используемых в разных размерах, таким образом обеспечивая различное кадрирование или совершенно другое изображение для разных размеров экрана.
 Вы можете найти подробное руководство по адаптивным изображениям в разделе Learn HTML здесь, на MDN.
 Элементом адаптивного дизайна, не описанным в предыдущих работах, была идея адаптивной типографики. По сути, это описывает изменение размеров шрифта в медиа-запросах, чтобы отразить меньшую или большую площадь экрана.
 В этом примере мы хотим установить для нашего заголовка уровня 1 значение  4rem , что означает, что он будет в четыре раза больше нашего базового размера шрифта. Это действительно большой заголовок! Нам нужен этот большой заголовок только на экранах большего размера, поэтому мы сначала создаем заголовок меньшего размера, а затем используем медиа-запросы, чтобы перезаписать его на больший размер, если мы знаем, что размер экрана пользователя составляет не менее  1200 пикселей .
  html {
  размер шрифта: 1em;
}

h2 {
  размер шрифта: 2rem;
}

@media (min-width: 1200 пикселей) {
  h2 {
    размер шрифта: 4rem;
  }
}
  
 Мы отредактировали наш приведенный выше пример адаптивной сетки, чтобы также включить адаптивный тип с использованием описанного метода. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
 На мобильном телефоне заголовок меньше:
 Однако на рабочем столе мы видим больший размер заголовка:
 Как показывает этот подход к типографике, вам не нужно ограничивать медиа-запросы только изменением макета страницы.Их можно использовать для настройки любого элемента, чтобы сделать его более удобным для использования или привлекательным при других размерах экрана.
 Использование единиц просмотра для адаптивной типографики 
 Интересным подходом является использование единиц просмотра  vw  для обеспечения гибкой типографики.  1vw  равно одному проценту ширины области просмотра, что означает, что если вы установите размер шрифта с помощью  vw , он всегда будет соответствовать размеру области просмотра.
 Проблема с выполнением описанного выше заключается в том, что пользователь теряет возможность масштабирования любого набора текста с помощью модуля  vw , поскольку этот текст всегда связан с размером области просмотра. Следовательно, вы никогда не должны устанавливать текст, используя только единицы области просмотра .
 Есть решение, и оно предполагает использование  calc () . Если вы добавите единицу  vw  к набору значений с использованием фиксированного размера, например  em  s или  rem  s, тогда текст все равно будет масштабируемым. По сути, модель  vw  добавляет к этому увеличенному значению:
  h2 {
  размер шрифта: calc (1.5rem + 3vw);
}  
 Это означает, что нам нужно указать размер шрифта для заголовка только один раз, а не настраивать его для мобильных устройств и переопределять его в медиа-запросах.Затем шрифт постепенно увеличивается по мере увеличения размера области просмотра.
 Если вы посмотрите на исходный HTML-код адаптивной страницы, вы обычно увидите следующий тег   в   документа.
  
  
 Этот метатег сообщает мобильным браузерам, что они должны установить ширину области просмотра в соответствии с шириной устройства и масштабировать документ до 100% от предполагаемого размера, который показывает документ в оптимизированном для мобильных устройств размере, который вы планировали.
 Зачем это нужно? Потому что мобильные браузеры обычно лгут о ширине своего окна просмотра.
 Этот метатег существует потому, что, когда был запущен оригинальный iPhone, и люди начали просматривать веб-сайты на маленьком экране телефона, большинство сайтов не было оптимизировано для мобильных устройств. Таким образом, мобильный браузер установит ширину области просмотра на 960 пикселей, отобразит страницу с такой шириной и покажет результат в виде уменьшенной версии макета рабочего стола. Другие мобильные браузеры (например, на Google Android) сделали то же самое.Пользователи могли увеличивать масштаб и перемещаться по сайту, чтобы просмотреть интересующие их фрагменты, но это выглядело плохо. Вы все еще увидите это сегодня, если вам не повезло натолкнуться на сайт, у которого нет адаптивного дизайна.
 Проблема в том, что ваш адаптивный дизайн с точками останова и медиа-запросами не будет работать должным образом в мобильных браузерах. Если у вас узкий макет экрана с шириной окна просмотра 480 пикселей или меньше, а размер окна просмотра установлен на 960 пикселей, вы никогда не увидите свой узкий экран на мобильном устройстве.Устанавливая  width = device-width , вы заменяете Apple по умолчанию  width = 960px  на фактическую ширину устройства, поэтому ваши медиа-запросы будут работать так, как задумано.
  Таким образом, вы должны  всегда  включать указанную выше строку HTML в заголовок ваших документов. 
 Существуют и другие настройки, которые вы можете использовать с метатегом области просмотра, однако в целом указанная выше строка - это то, что вы захотите использовать.
  initial-scale : Устанавливает начальный масштаб страницы, который мы установили на 1.
  высота : Устанавливает определенную высоту для области просмотра.
  минимальный масштаб : Устанавливает минимальный уровень масштабирования.
  максимальный масштаб : Устанавливает максимальный уровень масштабирования.
  масштабируется пользователем : предотвращает масштабирование, если установлено значение  нет .
 Следует избегать использования  с минимальным масштабом ,  с максимальным масштабом  и, в частности, с настройкой  с масштабированием пользователем  на  без . Пользователям должно быть разрешено увеличивать масштаб настолько, насколько им нужно; предотвращение этого вызывает проблемы с доступностью.
 Примечание 
 Существовало правило CSS @, предназначенное для замены метатега области просмотра - @viewport, однако это правило не получило поддержки и было объявлено устаревшим. @viewport не следует использовать.
 Адаптивный дизайн относится к дизайну сайта или приложения, который реагирует на среду, в которой он просматривается. Он включает в себя ряд функций и методов CSS и HTML, и теперь, по сути, именно так мы создаем веб-сайты по умолчанию. Рассмотрим сайты, которые вы посещаете на своем телефоне - вероятно, довольно необычно встретить сайт, который является версией для настольного компьютера в уменьшенном масштабе или на котором вам нужно прокрутить в сторону, чтобы найти что-то.Это связано с тем, что Интернет перешел к такому подходу к адаптивному дизайну.
 Также стало намного проще создавать адаптивный дизайн с помощью методов компоновки, которые вы изучили в этих уроках. Если вы новичок в веб-разработке, сегодня в вашем распоряжении гораздо больше инструментов, чем в первые дни адаптивного дизайна. Поэтому стоит проверять возраст всех материалов, на которые вы ссылаетесь. Хотя исторические статьи по-прежнему полезны, современное использование CSS и HTML значительно упрощает создание элегантных и полезных дизайнов, независимо от того, с какого устройства ваш посетитель просматривает сайт.
 Руководство по адаптивному веб-дизайну для новичков в 2021 году 
 Поскольку доступ к Интернету с мобильных устройств растет, уже недостаточно иметь статический дизайн веб-сайта, который хорошо смотрелся бы только на экране компьютера.
 Не говоря уже о том, что при разработке дизайна вы также должны учитывать планшеты, ноутбуки 2-в-1 и разные модели смартфонов с разными размерами экрана.
 Таким образом, если вы поместите ваш контент в один столбец и вызовете его выход, это не приведет к его сокращению.
 Благодаря адаптивному веб-дизайну вы можете сделать так, чтобы ваш веб-сайт выглядел наилучшим образом на мобильных телефонах, планшетах, ноутбуках и экранах настольных компьютеров.
 И это улучшение пользовательского опыта означает более высокие конверсии и рост бизнеса.
 Это руководство даст вам все, что вам нужно знать об адаптивном дизайне веб-сайтов, включая определения, пошаговое руководство, примеры и многое другое.
 Что такое адаптивный веб-дизайн? 
 Адаптивный дизайн - это подход к веб-дизайну, который позволяет адаптировать веб-контент к экранам и разным размерам окон различных устройств.
 Например, ваш контент может быть разделен на разные столбцы на экранах рабочего стола, потому что они достаточно широки, чтобы вместить этот дизайн.
 Если вы разделите свой контент на несколько столбцов на мобильном устройстве, пользователям будет сложно читать и взаимодействовать с ним.
 Адаптивный дизайн позволяет доставлять несколько отдельных макетов вашего контента и дизайна на разные устройства в зависимости от размера экрана.
 Недостаточно того, чтобы ваш сайт хорошо смотрелся на экране компьютера.🖥 Планшеты, ноутбуки 2-в-1 и смартфоны - все это часть уравнения ... и это руководство охватывает все, что вам нужно знать об адаптивном дизайне 🤳Нажмите, чтобы твитнуть
 Адаптивный веб-дизайн и адаптивный дизайн 
 Разница между адаптивным дизайном и адаптивным дизайном заключается в том, что адаптивный дизайн адаптирует рендеринг одностраничной версии. Напротив, адаптивный дизайн предоставляет несколько совершенно разных версий одной и той же страницы.
 Адаптивный и адаптивный дизайн
 Обе они представляют собой важные тенденции веб-дизайна, которые помогают веб-мастерам контролировать, как их сайт будет выглядеть на разных экранах, но подход отличается.
 Благодаря адаптивному дизайну пользователи будут получать доступ к одному и тому же базовому файлу через свой браузер, независимо от устройства, но код CSS будет управлять макетом и визуализировать его по-разному в зависимости от размера экрана. В адаптивном дизайне есть сценарий, который проверяет размер экрана, а затем обращается к шаблону, разработанному для этого устройства.
 Почему так важен адаптивный дизайн 
 Если вы новичок в веб-дизайне, разработке или ведении блогов, вы можете задаться вопросом, почему адаптивный дизайн вообще так важен.
 Ответ прост. Уже недостаточно заниматься дизайном для одного устройства. Мобильный веб-трафик превысил трафик компьютеров и теперь составляет большую часть трафика веб-сайтов, составляя более 51%.
 Доля рынка мобильных устройств, планшетов и настольных ПК
 Когда более половины ваших потенциальных посетителей используют мобильные устройства для работы в Интернете, вы не можете просто показать им страницу, предназначенную для настольных компьютеров. Было бы трудно читать и использовать, и это привело бы к плохому пользовательскому опыту.
 Но это еще не все.Пользователи мобильных устройств также составляют большинство посещений поисковой системы.
 Мобильный поисковый трафик
 Наконец, за последние несколько лет мобильная связь стала одним из важнейших рекламных каналов. Даже на рынке после пандемии расходы на мобильную рекламу растут на 4,8% до 91,52 миллиарда долларов.
 Независимо от того, решите ли вы размещать рекламу в социальных сетях или использовать органический подход, такой как YouTube SEO, подавляющая часть вашего трафика будет поступать от мобильных пользователей.
 Если ваши целевые страницы не оптимизированы для мобильных устройств и не просты в использовании, вы не сможете максимизировать рентабельность своих маркетинговых усилий.Низкие коэффициенты конверсии приведут к меньшему количеству потенциальных клиентов и потраченным впустую расходам на рекламу.
 Адаптивны ли сайты WordPress? 
 Адаптивность сайтов WordPress зависит от темы вашего сайта WP. Тема WordPress является эквивалентом шаблона для статического веб-сайта и контролирует дизайн и макет вашего контента.
 Если вы используете тему WordPress по умолчанию, например Twenty Twenty, дизайн адаптивный, но поскольку это дизайн с одним столбцом, вы можете не заметить этого, глядя на него на разных экранах.
 Если вы используете другую тему WordPress, вы можете проверить, реагирует она или нет, сравнив ее внешний вид на разных устройствах или с помощью инструментов разработчика Chrome.
 Строительные блоки адаптивного веб-дизайна 
 В этом разделе мы рассмотрим основу, лежащую в основе адаптивного дизайна веб-сайта, и его различные строительные блоки.
 CSS и HTML 
 В основе адаптивного дизайна лежит комбинация HTML и CSS, двух языков, которые управляют содержимым и макетом страницы в любом конкретном веб-браузере.
 HTML против CSS (Источник изображения: codingdojo.com)
 HTML в основном управляет структурой, элементами и содержимым веб-страницы. Например, чтобы добавить изображение на веб-сайт, вы должны использовать HTML-код вроде этого:
    
 Вы можете установить «класс» или «идентификатор», на которые впоследствии можно будет настроить таргетинг с помощью кода CSS.
 Вы также можете управлять основными атрибутами, такими как высота и ширина, в вашем HTML, но это больше не считается лучшей практикой.
 Вместо этого CSS используется для редактирования дизайна и макета элементов, которые вы включаете на страницу с HTML. Код CSS может быть включен в раздел