Встроенная отзывчивость 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
50 пикселей
отдых
1/4
отдых
100 пикселей
45 пикселей
отдых
Адаптивные классы W3.CSS
Система сетки W3.CSS отзывчива, и столбцы автоматически перестраиваются в зависимости от размера экрана:
| Класс | Описание |
|---|---|
| w3-половина | Занимает 1/2 окна (на средних и больших экранах) |
| w3-третий | Занимает 1/3 окна (на средних и больших экранах) |
| w3-две трети | Занимает 2/3 окна (на средних и больших экранах) |
| w3-квартал | Занимает 1/4 окна (на средних и больших экранах) |
| w3-три четверти | Занимает 3/4 окна (на средних и больших экранах) |
| w3-отдых | Занимает остальную часть ширины столбца |
| w3-столбец | Определяет один столбец в адаптивной сетке из 12 столбцов. |
| w3-мобильный | Добавляет в ячейку (столбец) адаптивность для мобильных устройств. Отображает элементы в виде блочных элементов на мобильных устройствах. |
Приведенные выше адаптивные классы должны быть помещены в класс w3-row (или класс w3-row-padding ), чтобы они были полностью адаптивными.
| Класс | Описание |
|---|---|
| w3-ряд | Контейнер для адаптивных классов без заполнения |
| w3-заполнение строки | Контейнер для адаптивных классов с отступом 8 пикселей слева и справа. |
| w3-контент | Контейнер для содержимого фиксированного размера по центру |
| w3-скрыть-маленький | Скрывает контент на маленьких экранах (менее 601 пикселя) |
| w3-скрыть-средний | Скрывает контент на средних экранах |
| w3-скрыть-большой | Скрывает контент на больших экранах (более 992 пикселей) |
| л1 - л12 | Адаптивные размеры для больших экранов |
| м1 - м12 | Адаптивные размеры для средних экранов |
| с1 - с12 | Адаптивные размеры для маленьких экранов |
Класс w3-half
Ширина класса w3-half составляет 1/2 родительского элемента (style="width:50%").
На экранах меньше 601 пикселя масштаб изменяется до 100%.
w3-половина
w3-половина
Пример
<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-третий класс
Ширина третьего класса w3 составляет 1/3 родительского элемента (style="width:33.33%").
На экранах меньше 601 пикселя масштаб изменяется до 100%.
w3-третий
w3-третий
w3-третий
Пример
<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-две трети
Ширина класса w3-two Third составляет 2/3 родительского элемента (style="width:66.66%").
На экранах меньше 601 пикселя масштаб изменяется до 100%.
w3-две трети
w3-третий
Пример
<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-четверти
Ширина класса w3-quarter составляет 1/4 родительского элемента (style="width:25%").
На экранах меньше 601 пикселя масштаб изменяется до 100%.
w3-квартал
w3-квартал
w3-квартал
w3-квартал
Пример
<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-три четверти
Ширина класса w3-threequarter составляет 3/4 родительского элемента (style="width:75%").
На экранах меньше 601 пикселя масштаб изменяется до 100%.
w3-три четверти
w3-квартал
Пример
<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-квартал
w3-половина
w3-квартал
w3-квартал
w3-квартал
w3-половина
w3-половина
w3-квартал
w3-квартал
Вложенные строки
Пример: w3-половина Внутри w3-половина
<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>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</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>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div>
Столбцы, использующие отдых
Класс w3-col определяет один столбец в адаптивной сетке из 12 столбцов.
Остальную часть ширины займет класс w3-rest :
я 150px
я остальные
Пример
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
Столбцы с использованием процентов
Вы также можете использовать свойство ширины CSS, чтобы установить ширину в процентах:
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-контента
Класс w3-content определяет контейнер для центрированного содержимого фиксированного размера. Используйте свойство CSS max-width, чтобы переопределить ширину по умолчанию (980 пикселей).
Пример
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-row против w3-row-padding
Класс w3-row определяет контейнер без отступов, а класс w3-row-padding добавляет к каждому столбцу отступы по 8 пикселей слева и справа:
w3-ряд:
w3-третий
w3-третий
w3-третий
w3-ряд-заполнение:
w3-третий
w3-третий
w3-третий
w3-ряд:
w3-ряд-заполнение:
Пример
<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 удаляет правое и левое поля у элемента. Этот класс часто используется для растягивания заполненной строки:
Пример с 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>
Адаптивный Показать / Скрыть
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.