Совет: как создать адаптивный макет сайта с помощью обтеканий

Совет: как создать адаптивный макет сайта с помощью обтеканий

От автора: В сегодняшнем небольшом уроке мы научимся создавать адаптивные макеты сайта с помощью свойства CSS float — старого, но проверенного способа. После мы посмотрим, как с этим же справляется Bootstrap. Изначально обтекания не были предназначены для создания базовой структуры страницы (в последних стандартах типа flexbox и grid эта проблема решена), так что работа с ними может быть немного запутанной. Разберем пример.

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

Скажем, мы хотим создать вот такой карточный макет:

Чтобы вы поняли идею, я создал версию на весь экран

Базовые стили

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

Ниже представлена разметка. В элементах списка в теге figure хранятся изображения и подписи к ним:

<ul class="clearfix">
  <li>
    <figure>
      <img src="path-to-the-image" alt="">
      <figcaption>Some description here</figcaption>
    </figure>
  </li>
        
  <!—элементы списка -->
</ul>

CSS макета:

/* базовые стили */
body {
  width: 80%;
  max-width: 1200px;
  margin: 40px auto;
  font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif;
  background: #cfd8dc;
  color: #37474f;
}
 
figure {
  background: whitesmoke;
  margin: 0 0 40px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}
 
figcaption {
  padding: 20px;
}
 
img {
  max-width: 100%;
  height: auto;
  display: block;
}
 
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
 
ul {
  margin: 0;
  padding: 0;
}
 
/* структурные стили */
 
li {
  list-style-type: none;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
 
/* медиа запросы */
 
@media screen and (min-width: 400px) {
  li {
    width: 50%;
  }
}
 
@media screen and (min-width: 768px) {
  li {
    width: 33.333%;
  }
}
 
@media screen and (min-width: 1024px) {
  li {
    width: 25%;  
  }    
}

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

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

Как найти карточку которую необходимо сбросить вниз

Исходя из примера выше, когда в одном ряду у нас помещается 4 карточки, то пятую необходимо сбросить на новую строку, затем девятую и т.д. В этом нам поможет CSS псевдокласс :nth-of-type(an+b), где ab+b параметр шаблона повторения. К примеру, на больших экранах (т.е. ≥1024px) мы используем шаблон 4n+1. Эта формула находит каждый четвертый элемент и выбирает следующий за ним.

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

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

@media screen and (min-width: 400px) {
  li {
    width: 50%;
  }
       
  li:nth-of-type(2n+1) {
    clear: left;
  }
}
     
@media screen and (min-width: 768px) {
  li {
    width: 33.333%;
  }
   
  li:nth-of-type(2n+1) {
    clear: none;
  }
   
  li:nth-of-type(3n+1) {
    clear: left;
  }
}
 
@media screen and (min-width: 1024px) {
  li {
    width: 25%;  
  }    
   
  li:nth-of-type(3n+1) {
    clear: none;
  }
   
  li:nth-of-type(4n+1) {
    clear: left;
  }
}

Также стоит упомянуть:

Вместо свойства clear:left мы могли точно так же взять более общее свойство clear:both.

Вместо псевдокласса :nth-of-type(an+b) можно было взять :nth-child(an+b).

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

Метод Bootstrap

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

Ниже HTML разметка, в которой задано, что элементы списка будут занимать 6 из 12 колонок на очень маленьких экранах, 4 колонки на маленьких и 3 колонки на больших экранах.

<div class="container">
  <ul class="row">
    <li class="col-xs-6 col-sm-4 col-lg-3">
      <figure>
        <img src="path-to-the-image" alt="" class="img-responsive">
        <figcaption>Some description here</figcaption>
      </figure>
    </li>
     
    <!—- элементы списка  -->
  </ul>
</div>

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

Первое – на экстра маленьких экранах (<768px) у нас двухколоночный макет, т.е. мы должны сбрасывать обтекания после каждого второго элемента. Вставьте строку ниже после каждого второго элемента в списке:

<li class="clearfix visible-xs-block"></li>

Далее, на маленьких и средних экранах (≥768px и <1200px) у нас трехколоночный макет, т.е. обтекания необходимо сбрасывать после каждого третьего элемента. Для этого необходимо вставить строку ниже после каждого третьего элемента в списке (после последнего необязательно):

<li class="clearfix visible-sm-block visible-md-block"></li>

И наконец, на больших экранах (≥1200px) у нас четырехколоночный макет, т.е. обтекания необходимо сбрасывать после каждого четвертого элемента списка. Точно так же вставьте строку ниже после каждого четвертого элемента списка:

<li class="clearfix visible-lg-block"></li>

Дополнительная разметка выглядит слегка некрасиво (многие не любят использовать разметку для управления стилями), но она работает, и мы получаем точно такой же результат, как и в прошлом способе. Все дополнительные элементы списка спрятаны и работают как невидимые разделители строк, кроме случаев для определенных размеров экрана, там стоит свойство display: block;. Полученное демо:

Заключение

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

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree