• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

Адаптивная сетка. Верстка по-новому

CSS, HTML, LESS, SASSПросмотров: 39076Комментарии: 02 октября 2013 г.

Адаптивность на сайтах на сегодняшний момент, как правило, решается единственным способом:

  • выстраиваем колонки для обычных разрешений (например более 960px);
  • для средних разрешений колонки становятся «резиновыми»;
  • для малых экранов сбрасываем float, после чего все ячейки следуют одна под другой.

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

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

После выхода Bootstrap 3, вебмастера столкнулись с новым методом построения сетки (grid). Именно он вызвал массу непонимания, поскольку сломал «старый» вариант без намёка на совместимость.

Впрочем, кому принадлежит авторство этого метода судить сложно: например в UIKit (отличный css-фреймворк) он появился несколько раньше.

Для затравки посмотрите ещё один пример, где собраны 5 примеров с разным поведением сеток. Заметьте, что для обычных мониторов (более 960px) сетки абсолютно идентичные.

HTML-разметка

Разметка такой сетки ничем не отличается от традиционного варианта.

<div class="row">
	<div class="col w1-4">1</div>
	<div class="col w1-4">2</div>
	<div class="col w1-4">3</div>
	<div class="col w1-4">4</div>
</div>

Названия классов, естественно могут быть произвольными. В этом примере

  • .row — контейнер. Ему нужно прописать стили .clearfix, поскольку внутренние блоки будут плавающими.
  • .col — общий класс для одной ячейки. Здесь выставляем float: left и .box_sizing(border-box) (это упростит использование отступов и нужной ширины).
  • w1-4 — класс, где указывается ширина ячейки width: 25%. Удобно считать не в процентах, а в колонках. В данном случае w1-4 говорит, что это 1/4 ширины (1 колонка из 4-х).

Стили определяем так:

.row .col {
	&.w1-1 { width: 100%; float: none;}
	&.w1-2 { width: 50%; }
	&.w1-3 { width: 33.333%; }
	&.w1-4 { width: 25%; }
}
В примерах CSS я использую LESS.

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

Типовое поведение сетки

Классы подобные .col.w1-4 определяют типовое поведение сетки. То есть то, как будет выглядеть сетка без условий в @media.

Этот момент важен, поскольку в разных фреймворках (и у разных вебмастеров) за основу берется разная ширина экрана. Я, например, предпочитаю за основу брать именно десктопы с разрешением 960-1140px, а все что ниже — описывать через @media. В том же Bootstrap'е используется mobile first, где основа — малые разрешения мобильников, а для перехода к десктопу следует использовать @media-правила.

То есть класс .col.w1-4 будет работать только для «типового» размера, а для того, чтобы использовать другую ширину экрана необходима модификация стилей.

Принципиальное отличие нового подхода в том, что мы не переопределяем «типовой» класс ячейки, а используем новый, который срабатывает только в пределах своего @media-условия.

Классы для breakpoints

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

// t — tablets 
@media (max-width: 768px) and (min-width: 480px)
 
// p — phones 
@media (max-width: 480px) 

Мы можем задать поведение для средних экранов (tablets) и малых (phones). Соответственно, в каждом из этих условий нужно сделать уникальные классы.

// t — tablets 
@media (max-width: 768px) and (min-width: 480px) {
	.row .col {
		&.w1-1-t { width: 100%; float: none;}
		&.w1-2-t { width: 50%; }
		&.w1-3-t { width: 33.333%; }
		&.w1-4-t { width: 25%; }
	}
}
 
// p — phones 
@media (max-width: 480px) {
	.row .col {
		&.w1-1-p { width: 100%; float: none;}
		&.w1-2-p { width: 50%; }
		&.w1-3-p { width: 33.333%; }
		&.w1-4-p { width: 25%; }
	}
}

Фактически это те же самые классы, только добавлены постфиксы «-t» и «-p». В Bootstrap'е используются префиксы «.col-xs-», «.col-sm-», «.col-md-», «.col-lg-». В UIKit — «.uk-width-medium-» и «.uk-width-large-». То есть именование классов может быть произвольным.

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

<div class="row">
	<div class="col w1-4 w1-2-t w1-1-p">1</div>
	<div class="col w1-4 w1-2-t w1-1-p">2</div>
	<div class="col w1-4 w1-2-t w1-1-p">3</div>
	<div class="col w1-4 w1-2-t w1-1-p">4</div>
</div>

В этом примере на обычных экранах все ячейки займут по 1/4 ширины. Для tablets все ячейки займут по 1/2 ширины. Для малых экранов (phones) ячейки займут все 100% ширины. См. демо-пример.

Ещё варианты

Данный подход, когда css-класс определяется в пределах @media-условия, может быть использован для разных задач. Например в Semantic UI (один из лучших css-фреймворков), можно задать «tablet.only» или «mobile.only». Аналогично можно придумать «phone-hide» и «tablets-hide» — скрывать ячейку для разного вида устройств.

@media (max-width: 768px) and (min-width: 480px) {
	.col.tablets-hide {
		display: none;
	}
}	
 
@media (max-width: 480px) {
	.col.phone-hide {
		display: none;
	}
}

И HTML-разметка:

<div class="row">
	<div class="col w1-4 w1-2-t w1-1-p">1</div>
	<div class="col w1-4 w1-2-t phone-hide">2</div>
	<div class="col w1-4 w1-1-p tablets-hide">3</div>
	<div class="col w1-4 w1-1-t w1-1-p">4</div>
</div>

В этом примере скрываем 2-ю ячейку для мобильников, и 3-ю ячейку для средних экранов.

Как видите, управлять можно не только шириной ячеек, но и их видимостью.

Использование LESS

Желающие поэкспериментировать, могут скачать grid.less, где рассписаны классы для 12 колонок.


Создание сайтов (Украина) →
Используем Live Reload без проблем
LPF — простой PHP-фреймворк для создания одиночных страниц
twitter.com facebook.com
Другие записи сайта
Модульность в php-проекте
Модульность в php-проекте
Dependency injection (внедрение зависимости)
Dependency injection (внедрение зависимости)
Обновление Albireo Framework
Обновление Albireo Framework
Как организовать древовидные рубрики на сайте (Materialized Path)
Как организовать древовидные рубрики на сайте (Materialized Path)
Учимся работать с MF. Вывод данных. Шапка
Учимся работать с MF. Вывод данных. Шапка
Итоги 2021 года
Итоги 2021 года
Оставьте комментарий!

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

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

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

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2943 | SQL: 20 | Память: 4.6MB | Вход