W3.CSS Встроенная адаптивность (отзывчивость)
W3.CSS включает в себя адаптивную мобильную сеточную систему для работы с макетом:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
W3.CSS Классы адаптивности
Система сетки W3.CSS адаптивна (отзывчива), и столбцы будут автоматически переставляться в зависимости от размера экрана:
| Класс | Описание |
|---|---|
| w3-half | Занимает 1/2 окна (на средних и больших экранах) |
| w3-third | Занимает 1/3 окна (на средних и больших экранах) |
| w3-twothird | Занимает 2/3 окна (на средних и больших экранах) |
| w3-quarter | Занимает 1/4 окна (на средних и больших экранах) |
| w3-threequarter | Занимает 3/4 окна (на средних и больших экранах) |
| w3-rest | Занимает остальную часть ширины столбца |
| w3-col | Определяет один столбец в 12-колоночной адаптивной сетке |
| w3-mobile | Добавляет адаптивность в первую очередь для мобильных устройств в ячейку (столбец). Отображает элементы в виде блочных элементов на мобильных устройствах. |
Указанные выше классы адаптивности должны быть помещены в класс w3-row (или класс w3-row-padding), чтобы быть полностью адаптивными.
| Класс | Описание |
|---|---|
| w3-row | Контейнер для адаптивных классов, без отступов (padding) |
| w3-row-padding | Контейнер для адаптивных классов, с отступом 8px слева и справа |
| w3-content | Контейнер для содержимого с фиксированным размером |
| w3-hide-small | Скрывает контент на маленьких экранах (менее 601 пикселей) |
| w3-hide-medium | Скрывает контент на средних экранах |
| w3-hide-large | Скрывает контент на больших экранах (более 992 пикселей) |
| l1 - l12 | Адаптивные размеры для больших экранов |
| m1 - m12 | Адаптивные размеры для средних экранов |
| s1 - s12 | Адаптивные размеры для маленьких экранов |
Класс w3-half
Ширина класса w3-half равна 1/2 родительского элемента (style="width:50%").
На экранах размером менее 601 пикселя он изменяется до 100%.
w3-half
w3-half
Пример
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
Попробуйте сами »
Класс w3-third
Ширина класса w3-third равна 1/3 родительского элемента (style="width:33.33%").
На экранах размером менее 601 пикселя он изменяется до 100%.
w3-third
w3-third
w3-third
Пример
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
Попробуйте сами »
Класс w3-twothird
Ширина класса w3-twothird равна 2/3 родительского элемента (style="width:66.66%").
На экранах размером менее 601 пикселя он изменяется до 100%.
w3-twothird
w3-third
Пример
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
Попробуйте сами »
Класс w3-quarter
Ширина класса w3-quarter равна 1/4 родительского элемента (style="width:25%").
На экранах размером менее 601 пикселя он изменяется до 100%.
w3-quarter
w3-quarter
w3-quarter
w3-quarter
Пример
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
Попробуйте сами »
Класс w3-threequarter
Ширина класса w3-threequarter равна 3/4 родительского элемента (style="width:75%").
На экранах размером менее 601 пикселя он изменяется до 100%.
w3-threequarter
w3-quarter
Пример
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
Попробуйте сами »
Комбинации
w3-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
Вложенные строки
Пример: w3-half внутри w3-half
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>Это параграф.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>Это параграф.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>Это параграф.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>Это параграф.</p>
</div>
</div>
</div>
</div>
Попробуйте сами »
Колонки, использующие остаток ширины
Класс w3-col определяет один столбец в 12-колоночной адаптивной сетке.
Класс w3-rest будет занимать остальную часть ширины:
Я имею 150px
Я остальное
Пример
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>Я имею 150px</p></div>
<div class="w3-rest w3-green"><p>Я остальное</p></div>
</div>
Попробуйте сами »
Колонки, использующие проценты
Также можно использовать CSS свойство width, чтобы установить ширину в процентах:
20%
60%
20%
Пример
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div class="w3-col" style="width:20%"><p>20%</p></div>
</div>
Попробуйте сами »
Класс w3-content
Класс w3-content определяет контейнер для содержимого с фиксированным размером. Используйте свойство CSS max-width, чтобы переопределить ширину по умолчанию (980px).
Пример
<body class="w3-content" style="max-width:500px">
содержимое страницы...
</body>
Попробуйте сами »
w3-row vs. w3-row-padding
Класс w3-row определяет контейнер без отступов, в то время как класс w3-row-padding добавляет 8-пиксельный левый и правый отступ к каждому столбцу:
w3-row:
w3-third
w3-third
w3-third
w3-row-padding:
w3-third
w3-third
w3-third
w3-row:
w3-row-padding:
Пример
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Попробуйте сами »
Растягивание мягкого ряда
Класс w3-stretch удаляет правое и левое поля (margin) элемента. Этот класс часто используется для растягивания мягкого ряда:
Пример с w3-stretch:
Пример без w3-stretch:
Пример
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
Попробуйте сами »
Адаптивные Показать / Скрыть
Классы w3-hide-small, w3-hide-medium и w3-hide-large скрывают элементы на экранах определенного размера.
Примечание: Измените размер окна браузера, чтобы понять, как оно работает:
Пример
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small будет скрыт на маленьких экранах (телефонах)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium будет скрыт на средних экранах (планшетах)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large будет скрыт на больших экранах (ноутбуки/десктопы)</p>
</div>
Попробуйте сами »
Класс w3-mobile
Класс w3-mobile добавляет адаптивность любых элементов в первую очередь для мобильных устройств.
Он добавляет display:block и width:100% к элементу на экранах шириной менее 600 пикселей.
Разрешения экрана
Встроенная адаптивность W3.CSS использует размер экрана DP.
W3.CSS будет рассматривать iPhone 6 с разрешением 750 x 1334 пикселей как маленький экран 375 x 667 пикселей DP.
Маленькие экраны имеют разрешение менее 601 пикселя, средние экраны имеют разрешение менее 993 пикселей.
Ниже приведен список типичных разрешений устройства и сообщенных размеров DP:
Iphone 4
Разрешение
640 x 960
DP
320 x 480
Iphone 5
Разрешение
640 x 1136
DP
320 x 528
Iphone 6
Разрешение
750 x 1334
DP
375 x 667
Iphone 6s
Разрешение
1080 x 1920
DP
414 x 736
Galaxy S6
Разрешение
1440 x 2560
DP
360 x 640
Note 4
Разрешение
1440 x 2560
DP
400 x 853
Nexus 6
Разрешение
1440 x 2560
DP
411 x 731
iPad Mini
Разрешение
768 x 1024
DP
768 x 1024
iPad
Разрешение
1536 x 2048
DP
768 x 1024
Типичный ноутбук
Разрешение
1366 x 768
DP
1366 x 768
Типичный десктоп
Разрешение
1920 x 1080
DP
1920 x 1080
12-колоночная адаптивная меняющаяся (гибкая) сетка
W3.CSS также поддерживает усовершенствованную меняющуюся (гибкую) сетку с 12 колонками.
Измените размер страницы, чтобы увидеть эффект!
Эта часть будет занимать 12 столбцов на маленьком экране, 4 на среднем экране и 3 на большом экране.
Эта часть будет занимать 12 столбцов на маленьком экране, 8 на среднем экране и 9 на большом экране.
Вы узнаете намного больше о fluid grid (гибкой сетке) в следующем разделе.
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
