CSS: Адаптивные структуры столбцов или Responsive design

CSS: Адаптивные структуры столбцов или Responsive design

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

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

nth-of-type

.

Я использую этот прием для создания многих тем WordPress. Он не требует классов

.first

или

.last

, и количество колонок может быть изменено в зависимости от окна просмотра. Другими словами, его можно изменять от 4-колоночного до 3-х или 2-х, и так далее.

Неудобство использования классов first и last

Обычно мы добавляем классы

.first

или

.last

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

CSS: Адаптивные структуры столбцов или Responsive design

Выражение

:nth-of-type(An+B)

позволяет легко сбросить расстояние и изменить его без необходимости добавления классов

.first

или

.last

. Например:

  • .grid4 .col:nth-of-type(4n+1)

    = использовать каждый четвертый

    .col

    элемент, начиная с первого

  • .grid3 .col:nth-of-type(3n+1)

    = использовать каждый третий

    .col

    элемент, начиная с первого

  • .grid2 .col:nth-of-type(2n+1)

    = использовать каждый второй

    .col

    элемент, начиная с первого

CSS: Адаптивные структуры столбцов или Responsive design

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}

Добиваемся адаптивности с медиа-запросами (Media Queries)

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

/* колонки */
.col {
background: #eee;
float: left;
margin-left: 3.2%;
margin-bottom: 30px;
}
/* grid4 4 колонки */
.grid4 .col {
width: 22.6%;
}
/* grid3 3 колонки */
.grid3 .col {
width: 31.2%;
}
/* grid2  2  колонки */
.grid2 .col {
width: 48.4%;
}

Переход дизайна от четырех столбцов к трем

Чтобы перейти от 4 колонок к 3 колонкам при ширине окна просмотра меньше, чем 740 пикселей:

  1. Измените ширину
    .grid4 .col

    до 31.2% (треть ширины)

  2. Сбросьте левый отступ и очистите свойства
  3. Затем примените еще раз левый отступ и очистите свойства используя
    nth-of-type(3n+1)

    , чтобы образовать сетку из трех столбцов

CSS: Адаптивные структуры столбцов или Responsive design

@media screen and (max-width: 740px) {
.grid4 .col {
width: 31.2%;
}
.grid4 .col:nth-of-type(4n+1) {
margin-left: 3.2%;
clear: none;
}
.grid4 .col:nth-of-type(3n+1) {
margin-left: 0;
clear: left;
}
}

Переход от четырех и трех колонок к двум

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

.col

.

@media screen and (max-width: 600px) {
/* меняем grid4 на 2 колонки */
.grid4 .col {
width: 48.4%;
}
.grid4 .col:nth-of-type(3n+1) {
margin-left: 3.2%;
clear: none;
}
.grid4 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
/* меняем grid3 на 2 колонки */
.grid3 .col {
width: 48.4%;
}
.grid3 .col:nth-of-type(3n+1) {
margin-left: 3.2%;
clear: none;
}
.grid3 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
}

Выровнять все столбцы по ширине

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

@media screen and (max-width: 400px) {
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}

Проблемы с Internet Explorer

И медиа-запросы, и псевдо-класс nth-of-type не поддерживаются Internet Explorer 8 или выше. Можно использовать

selectivizr.js

, чтобы обеспечить поддержку

nth-of-type

для Internet Explorer и

respond.js

для медиа-запросов. К сожалению,

selectivizr.js

и

respond.js

не очень хорошо работают вместе (то есть, псевдо-класс

nth-of-type

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

Самые читаемые:

Hello Pal – общайся с миром!
Самый лучший с...
Find Face – как найти человека ВКонтакте по фотографии
Разработчикам ...
Как подготовить iPhone к продаже
Меньше месяца ...
Забыл пароль на iphone 3 способа удаления пароля с iPhone
C кем не бывае...
Phone Drive – для удобной работы с файлами
iTunes – очень...
Распиновка блока питания компьютера – инструкция
Модернизация ко...
Тестируем оперативную память Windows 7 64 bit
Ошибки оператив...
Наиболее частые поломки IPhone
Любой, даже сам...
Дайджест событий: лето
Давно не писал...
Возьму заказы создание сайтов на WordPress
Сайты на заказ...
Финстрип за декабрь 2013 (№32)
C Наступившим ...
Как один западный блог увеличил число подписчиков на 600% с помощью плагина OptinMonster
Каждый успешный...
Создание анонсов статей с использованием тегов MORE и NOTEASER
Используя пол...
Редирект с www на без www
Если вы разра...
Черная схема работы многих вебмастеров в rotapost
Черная схема ра...
Список партнерских программ на которых я зарабатывал и зарабатываю
Список партнерс...
Как сделать скриншот страницы сайта целиком онлайн?
Всех снова рад ...
6 способов увеличить количество подписчиков на блоге
Всем доброго вр...
Фильтр яндекса ТЫ ПОСЛЕДНИЙ
Фильтр яндекса ...
Бесплатный анализ сайта сервисы, которые вам помогут
Всем привет! Се...
Как зарегистрироваться в сервисе почтовых рассылок Smartresponder как автор
Всем привет дор...
Сам себе биржа трафика
Сам себе биржа ...
HTML, CSS, jQuery: Меню для мобильных сайтов. Обучение
Одна из распр...
Как заработать в CPA или оплата за действие!
Как то я уже п...
ПФ или просто ПедикФактор
Сегодня многие...
Как я накопил
Если это шеф, Д...
История с укозами
Многие почему ...
Лето долгожданных нововведений от BinPartner!
BinPartner — ф...

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*