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

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

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

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

ROME: Total War – встречаем одну из лучших стратегий
У каждого гейм...
Vk Settings царский ВК [Free]
Давным-давно о...
Очередная Музыка. ВК – слушаем и сохраняем музыку из ВКонтакте
В перспективе ...
PROMT (offline) дорого, но удобно
Продолжаем кур...
Продажи Apple Watch в прошлом квартале упали более чем на 70%
Аналитики иссл...
Продажи Apple Watch в 2016 году снизятся, несмотря на запуск Apple Watch Series 2
Аналитик Мин-Ч...
Погода Live – функциональное и красивое положение о погоде
Есть два типа ...
File Manager for Web Cloud Drive – управляем файлами в Google Drive
Обычно, когда ...
Ренд Фишкин: SEO «Улов»: Максимальная выгода от рейтинга ваших конкурентов
морская уточка ...
13750р Профит на который можно сдохнуть или???
Сегодня пришел...
Ссылко торговля перспективы рынка
Сегодня наткну...
Макдональдц закрывается!
В мире творитс...
История заработка на игровых серверах просто офигенный пост от Маула!
Интервью с Сане...
Итоги конкурса от BINPARTNER “У кого больше”!
Конкурс от BIN...
Монетизация по максимуму от Admitad!
Я считаю Адмит...
Финстрип №33 полтора года спустя!
Долгожданный ф...
Инфобизнес это хорошо!
Жадность это ...
Proflinks. ru Реальный Отзыв или остерегайтесь подделок!!!
Уё*ный дизайн ...
Xmlstock. com поднимим манетку с xml лимитов от Яндекса!
На днях дали н...
Как легко создать адаптивную галерею для WordPress сайта с помощью плагина Envira
В вордпрессе ес...
100 человек в сутки. Как добиться? Часть 1
В Интернете с...
Апдейт Google PR от 07-08.11.2012
Апдейт Google P...
Как открыть рыболовный магазин?
Всем доброго дн...
Простая регистрация в twitter или как зарегистрироваться в твиттере
Простая регистр...
Зарабатываем с партнерскими программами
Информацией о т...
МАНУАЛ Как поднять ТИЦ с помощью шаблонов сайтов бесплатно
МАНУАЛ Как подн...
Каталог партнерских программ и планы на лето
Каталог партнер...
Как подобрать цвета для своего сайта? Обзор 4 сервисов
Всех снова рад ...

О admin

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

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

*

x

Check Also

Что такое html тег address и как он работает?

Всем хорошего и бодрого утра! На линии обучения азам сайтостроительства Макс Метелев и сегодня мы рассмотрим такой интересный тег, который применяется в html 5 версии – address. В него можно включить информацию об авторе и ...

Как правильно подключить шрифты в CSS на сайте?

Всем привет дорогие друзья! Наконец то к сайту вернулась посещаемость, а то с праздниками народ вообще подзабил на полезные статьи. Ну это понятно, кто в праздники будет что-то читать. Сегодня для вас подготовил хорошую статью ...

Как выбрать бесплатный конструктор сайта?

Всем привет дорогие друзья и читатели моего блога! Средства, облегчающие процесс создания веб-сайтов создаются постоянно, с тех пор как к Интернету получил доступ обычный обыватель. Но тенденции и технологии быстро меняются, есть множество различных методов ...

Идея для бизнеса: разработка иконок для сайта

Основной принцип. Когда человек первый раз попадает на веб сайт, то первое на что он обращает свое внимание – это иконки для заголовков. Именно по ним, а не по материалу идет выбор документа для чтения. ...

Как скруглить углы и края в фотошопе

Рад снова и снова видеть вас мои дорогие читатели! Сегодня очередной урок по фотошопу и расскажу сегодня как скруглить края (углы) у фото или картинки в фотошопе. На самом деле сложного здесь ничего нет. Все ...

Как скруглить края или углы у картинки онлайн

Добрый день друзья и подруги! Рад вас всех видеть в обновленном составе. Почему в обновленном? Да потому как активность ваша на блоге растет с каждым днем и это радует. Это хороший знак того, что я ...

Оптимизация картинок на сайте с помощью полезных сервисов и программ

Всем привет друзья! В этой статье я расскажу про важность оптимизации изображений и картинок на вашем сайте, без разницы используете ли вы CMS WordPress, Joomla или же у вас просто статический сайт. Оптимизация каждой картинки ...

Как подобрать цвета для своего сайта? Обзор 4 сервисов

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

Разработка качественного и продающего дизайна сайта

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

Скликивание рекламы

Скликивание рекламы Всем привет! Данная статья будет посвящена такому вопросу, как скликивание рекламы. Частично суть проблемы была описана в данном посте, но чаще всего под скликивание попадает реклама по коммерческим запросам. Даже для тех, кто ...

Promo-soft AddStudio

Promo-soft AddStudio Всем привет! На данном блоге давно не было обзоров SEO софта и поэтому сейчас постараюсь исправиться. На этот раз виновником торжества; стала программа AddStudio от Promo-soft. Что примечательно это полностью отечественный продукт, так ...

Promo-soft Add2Board

Promo-soft Add2Board Всем привет! Я продолжаю обзор SEO софта от компании Promo-soft и на этот раз речь пойдет про Add2Board. Основное предназначение программы  автоматическая рассылка на доски объявлений. До этого чтобы ингда разослать объявления я пользовался ...

Promo-soft AddSite

Promo-soft AddSite Всем привет! Как вы уже, наверное, заметили я делаю обзор всей линейки программ от Promo-soft  и сегодня на очереди AddSite . До этого мне приходилось работать лишь с allsubmitter и так не доведенной ...

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан Всем привет! Собственно новость не первой свежести, но до этого многие полагали что это фейк и что взломанного хрумера 7 версии не существует в природе. Еще давно не ...

Key collector

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

Хитрый способ сбора качественной пробиваемой базы для XRUMER

Хитрый способ сбора качественной пробиваемой базы для XRUMER Всем привет! Ни для кого не секрет, что каким бы замечательным не был софт для массовой регистрации/рассылки, без надлежащего качества баз он почти не имеет ценности. Базы ...

Рейтинг@Mail.ru