CSS: Адаптивные структуры столбцов или Responsive design опубликовал Радик Алиев категория  
просмотры 15 905

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

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

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

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

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

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

Выражение :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 элемент, начиная с первого

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

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

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

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

  1. Измените ширину .grid4 .col до 31.2% (треть ширины)
  2. Сбросьте левый отступ и очистите свойства
  3. Затем примените еще раз левый отступ и очистите свойства используя nth-of-type(3n+1), чтобы образовать сетку из трех столбцов

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

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

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

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

Проблемы с Internet Explorer

И медиа-запросы, и псевдо-класс nth-of-type не поддерживаются Internet Explorer 8 или выше. Можно использовать selectivizr.js, чтобы обеспечить поддержку nth-of-type для Internet Explorer и respond.js для медиа-запросов. К сожалению, selectivizr.js и respond.js не очень хорошо работают вместе (то есть, псевдо-класс nth-of-type не работает в пределах медиа-запросов). Это означает, что единственная проблема с адаптивной сеткой заключается в том, что невозможно перейти от четырех столбцов к трем или двум.

Теги:

5 Комментарий

Оставить комментарий
  1. 4idroid Август 15, 2013 at 8:03 пп #

    Отличный пост — то, что искал. Без воды и все по делу!

  2. 4idroid Август 15, 2013 at 8:19 пп #

    Можете подсказать — у меня при разрешении меньше 750px сайдбар смещается вниз и устанавливается ширина 300px хотя в этих 750px мог бы влезть сайдбар в две колонки. Как это реализовать? Подскажите, если знаете.

  3. Gennady Август 15, 2013 at 10:31 пп #

    вам нужно исследовать css свойства(например с помощью google chrome — просмотр кода элемента) ваших html блоков: margin, padding, float, clear а также приоритета !important при нужном разрешении а не только ориентироваться на свойство width. Тогда вы сможете увидеть причину и поправить css/html код

  4. Freya Февраль 14, 2014 at 11:58 дп #

    Добрый день!

    А как вывести произвольные поля в две колонки?
    Подозреваю, что нужно вставить в .css что-то типа
    img:nth-of-type(2n+1) { float: left; }
    img:nth-of-type(2n) { float: right; }
    А что именно, не знаю. Буду благодарна за помощь

  5. Василий Чёрный Февраль 26, 2014 at 12:51 пп #

    Спасибо за статью, очень познавательно 🙂
    В свою очередь хочу поделиться на “другое” решение адаптивности сеток. Не так давно, пытаясь найти подходящее решение для реализации адаптивной сетки, наткнулся на одну статью, в которой рассказывается как добиться адаптивной сетки при помощи text-align: justify.
    Ссылку вбрасываю, может кому из ваших читателей пригодится.
    http://aterr.net/adaptivnaya-setka-pri-pomoshhi-vyravnivaniya-text-align-justify

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

vk_like_site