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

В данной статье рассмотрим, как верстать адаптивный сайт использую СSS и HTML. Многие наверное слышали, чтобы сверстать адаптивный сайт или его адаптировать под мобильное устройство, нужно использовать Bootstrap, но так ли это на самом деле? На деле это не совсем так, но Bootstrap действительно позволяет создать адаптивный дизайн сайта, используя предопределенные классы, где уже имеются CSS свойства и медиа-запросы. Говоря коротко Bootstrap – это всего лишь набор СSS и HTML шаблонов.

Что нужно использовать для создания адаптивного сайта?

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

Вывод, чтобы создавать адаптивные сайты, достаточно понимать принцип работы СSS и HTML, при необходимости использовать JS или его библиотеку JQuery. Подробнее об этом ниже.

Подходы к созданию адаптивной верстки

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

Адаптивность достигается за счет:

  • Использования гибких единиц измерения.
  • Скрытия, показа или перестройки элементов сайта.
  • Переопределения стилей с помощью Медиа-запросов или JS и т.д.
  • Использования CSS-flex, CSS-grid (позволяют реализовать то же самое что при display: block, но намного проще, с использованием минимального количество медиа-запросов и костылей.)
  • Других разных хитростей

Перестройка блоков с помощью css-flex

  1. Создаем контейнер (div) и в него помещаем элементы, которые должны перестраиваться, в нашем случае 3 div-а.
    
    <div class="conteiner">
      <div>
        <h2>Статья 1</h2>
        <p>Lorem...</p>
      </div>
      <div>
        <h2>Статья 2</h2>
        <p>Lorem...</p>
      </div>
      <div>
        <h2>Статья 3</h2>
        <p>Lorem...</p>
      </div>
    </div>
  2. Применяем стили:
    
    .conteiner {
      display: flex;
      flex-wrap: wrap;
    }
    .conteiner>div {
      background-color: white;
      margin: 5px;
      padding: 5px;
    
      flex-basis: 300px;
      flex-grow: 1;
      flex-shrink: 1;
    }

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

При маленьком размере экрана, блоки выстраиваются в колонну.

Плюсы css-flex:

  • Можно сделать адаптивные блоки без использования медиа-запросов.
  • Легкое выравнивания.
  • Возможность менять элементы местами.
  • Простота реализации.

Перестройка блоков с помощью css display: block

Попробуем сделать то же самое, но используя display: block.

HTML структуру используем из прошлого примера.


.conteiner>div {
background-color: white;
margin: 5px;
padding: 5px;
display: inline-block;
width: calc(100%/3 - 13px);
}
@media screen and (max-width: 800px) {
.conteiner>div {
width: calc(100%/2 - 12px);
}
}       
@media screen and (max-width: 452px) {
.conteiner>div {
width: calc(100% - 10px);
}
}


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

Можно было использовать все отступы и поля в %, тогда размеры не пришлось вычислять с помощью функции calc().

Плюсы метода:

  • По сравнению с методом выше плюсов не выявлено.

Минусы:

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

Изображения подстраивающее под размер контейнера.

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

Чтобы так не случалось применим к элементам img следующее css свойства: max-width: 100% это гарантирует что изображение не сможет иметь размер больше чем контейнер по горизонтали.

 

Как видно из этих трех картинок, третья не в полностью заполнила нижнюю часть контейнера, потому что у неё отличаются пропорции от двух предыдущих картинок. Чтобы картинка заполнила весь контейнер не только по ширине, но и высоте добавим свойство min-height: 100%;

Картинки растянулись игнорируя соотношения ширины и высоты. Чтобы картинка сохраняла пропорции добавим object-fit: cover — это свойство позволяет независимо от введенных размеров картинки сохранять пропорции, при этом происходит ее увеличение таким образом, чтобы заполнить весь контейнер.

Пример кода:


<div class="conteiner">
  <div><img src="1.jpg" alt=""></div>
  <div><img src="2.jpg" alt=""></div>
  <div><img src="3.jpg" alt=""></div>
</div>

body {background-color: grey;}
.conteiner>div {
background-color: white;
margin: 5px;
padding: 5px;
}
.conteiner {
display: flex;
flex-wrap: wrap;
}
.conteiner>div {
flex-basis: 300px;
flex-grow: 1;
flex-shrink: 1;
max-width: 300px;
}
.conteiner>div>img {
max-width: 100%;
min-height: 100%;
object-fit: cover;
}

Создаем ограничительную область для контента.

До этого еще не устанавливали ограничения для контента и он занимал все доступное пространство, потому что мы установили flex-grow: 1.

Сделаем ограничения, для этого создадим div c классом areal и переместим в него все содержимое находящееся в body и для класса areal пропишем:

 
.areal {
max-width: 1100px;
margin: 0 auto;
}                     

Max-width – указывает максимальную ширина элемента. Margin: 0 auto – указывает что нужно сверху и снизу сделать отступ 0, а слева справа автоматически, за счет этого если ширина браузера больше чем 1100px появляется равномерная пустая область с левой и правой стороны.

Заключение

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

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

Добавить комментарий

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