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 | Контейнер для адаптивних класів без доповнення |
| w3-row-padding | Контейнер для адаптивних класів із відступом 8 пікселів ліворуч і праворуч |
| 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 Class
Ширина класу 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 Inside 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>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>
Спробуйте самі »
Стовпці з використанням Rest
Клас 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, щоб установити ширину у відсотках:
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, щоб змінити стандартну ширину (980 пікселів).
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 видаляє правий і лівий поля з елемента. Цей клас часто використовується для розтягування доповненого рядка:
Приклад із 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 пікселів DP, середні екрани менше, ніж 993 пікселів DP.
Нижче наведено список типових роздільних здатностей пристроїв і зареєстрованих розмірів 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 на великому екрані.
Ви дізнаєтеся набагато більше про гнучку сітку в наступному розділі.
