Вы когда-нибудь думали об адаптивном веб-дизайне и о том, что это на самом деле означает?

(Эта статья изначально была размещена на https://www.developermate.com)

О чем мы на самом деле говорим, когда говорим об отзывчивом дизайне и чего мы хотим достичь?

Отзывчивый веб-дизайн — это использование HTML и CSS для автоматического изменения размера страницы, ее скрытия, уменьшения или увеличения. Проще говоря, все дело в том, чтобы наша веб-страница выглядела одинаково на всех типах устройств (настольных компьютерах, планшетах и ​​телефонах), и именно здесь вам пригодится адаптивный дизайн. Взгляните на следующее изображение, это то, чего мы пытаемся достичь.

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

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

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

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

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

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

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

<img src="/Images/monkey.jpg" style="width:100%;">

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

<img src="/Images/small-monkey.jpg" style="max-width:100%;height:auto;">

Изображения в зависимости от ширины браузера
Время от времени удобно иметь возможность переключать изображение, которое показывается пользователю. Может быть, изображение не подходит, когда размер браузера слишком мал, или наоборот, может быть, оно не подходит, когда размер браузера слишком велик. HTML-элемент ‹picture› может содержать ноль или более ‹source›-элементов. Элемент ‹img› используется для предоставления разных изображений для разных сценариев отображения. Браузер рассмотрит и выберет наилучшее совпадение среди каждого дочернего исходного элемента. Если среди всех элементов ‹source› не найдено совпадений, будет использоваться URL-адрес атрибута src элемента ‹img›.

<picture>
    <source srcset="../Images/small-monkey.jpg" media="(max-width: 500px)">
    <source srcset="../Images/gorilla.jpg" media="(max-width: 1200px)">
    <source srcset="../Images/monkey.jpg">
    <img src="../Images/small-monkey.jpg" alt="A Very Small Monkey" style="width:auto;">
    </picture>

Использовать адаптивный размер текста
Если вы хотите, чтобы размер текста был адаптивным, вы можете установить размер относительно текущего размера области просмотра: vw, vh и vmin.
Размер текста будет динамически изменяться при изменении размера браузера.

Макет HTML

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

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

В настоящее время для создания страниц распространено и настоятельно рекомендуется использовать современные технологии, такие как CSS, JavaScript и Angular. Но также можно создавать страницы только с помощью HTML.

Элементы макета HTML

HTML5 содержит новые семантические элементы, которые используются для определения различных частей веб-страницы.
Семантический элемент используется для четкого описания значения элемента как для браузера, так и для разработчика. Элемент, не описывающий содержимое страницы, не является семантическим элементом, и типичными примерами таких элементов являются теги <div> и <span>. Он не предоставляет информацию о содержании на странице или в теге.

Элементы, описывающие содержание элемента, называются семантическими элементами. Типичными примерами таких семантических элементов являются: <form>, <table> и <article>-теги. Они четко определяют содержимое текущего тега.

Сделайте это красиво

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