Отзывчивый Классы
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
отдых
1/4
отдых
100px
45px
отдых
подвесная система W3.CSS является отзывчивым, а столбцы будут перестраивать автоматически, в зависимости от размера экрана:
| Класс | Описание |
|---|---|
| w3 половина | Занимает 1/2 окна (на средних и больших экранах) |
| W3-третьих | Занимает 1/3 окна (на средних и больших экранах) |
| W3-twothird | Занимает 2/3 окна (на средних и больших экранах) |
| и3-й квартал | Занимает 1/4 окна (на средних и больших экранах) |
| W3-threequarter | Занимает 3/4 окна (на средних и больших экранах) |
| W3-отдых | Определяет остальную часть строки |
| W3-Col | Определяет столбец отзывчивым жидкости сетки 12 колонку (подробнее в следующей главе) |
Отзывчивый Ряды
Отзывчивый классы должны быть размещены внутри W3-ряд, чтобы быть полностью отзывчивым.
| Класс | Описание |
|---|---|
| W3-рядный | Определяет отступ менее контейнер для чувствительных классов. |
| W3-рядного обивка | Определяет мягкий контейнер для чувствительных классов. |
W3 половина класса
Ширина класса W3 половины составляет 1/2 от родительского элемента (стиль = "ширина: 50%").
На маленьких экранах * она изменяет размер до 100%.
w3 половина
w3 половина
пример
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> Попробуй сам " W3-третьего класса
Ширина класса W3-третьих, 1/3 родительского элемента (стиль = "ширина: 33,33%").
На маленьких экранах * она изменяет размер до 100%.
W3-третьих
W3-третьих
W3-третьих
Пример использования W3-треть
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Попробуй сам " W3-twothird Класс
Ширина класса W3-twothird составляет 2/3 от родительского элемента (стиль = "ширина: 66,66%").
На маленьких экранах * она изменяет размер до 100%.
W3-twothird
W3-третьих
Пример использования W3-треть
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Попробуй сам " И3-й квартал класса
Ширина класса W3 четверти составляет 1/4 от родительского элемента (стиль = "ширина: 25%").
На маленьких экранах * она изменяет размер до 100%.
и3-й квартал
и3-й квартал
и3-й квартал
и3-й квартал
Пример использования 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-threequarter Класс
Ширина класса W3-threequarter является 3/4 родительского элемента (стиль = "ширина: 75%").
На маленьких экранах * она изменяет размер до 100%.
и3-й квартал
и3-й квартал
Пример использования W3-threequarter
<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> Попробуй сам " Комбинации
и3-й квартал
w3 половина
и3-й квартал
и3-й квартал
и3-й квартал
w3 половина
w3 половина
и3-й квартал
и3-й квартал
Вложенные Ряды
Пример: 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> Попробуй сам " Столбцы Использование Rest
Я 150px
Я остальное
Пример использования W3-отдых
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> Попробуй сам " Столбцы Использование Процент
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-контента определяет контейнер для фиксированного размера в центре содержания:
Разница между W3-строки и W3-пропашные обивка
Класс w3-строка определяет проложенный менее контейнер, в то время как класс W3-рядного обивка добавляет 8px левый и правый отступы для каждого столбца:
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_fjords.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_fjords.jpg"></div>
</div> Попробуй сам " Сетка отзывчивым жидкость 12 Колонка
W3.CSS также поддерживает расширенный 12 столбцов сетки отзывчивым жидкости.
Изменение размера страницы, чтобы увидеть эффект!
Эта часть будет занимать 12 столбцов на маленьком экране, 4 на среднем экране и 3 на большом экране.
Эта часть будет занимать 12 столбцов на маленьком экране, 8 на носителе экране и 9 на большом экране.
Вы узнаете больше о сетке жидкости в следующей главе.
* Разрешение экрана
Встроенный отзывчивость W3.CSS использует размер ДП экрана.
W3.CSS будет лечить iPhone 6 с разрешением 750 х 1334 пикселей в качестве небольшого экрана 375 х 667 пикселей.
Небольшие экраны менее чем 601 пикселей DP, средние экраны менее чем 993 пикселей DP.
Ниже приведен список типичных разрешений устройств и сообщили размеры DP:
Ай фон 4
разрешение
640 х 960
DP
320 х 480
iphone 5
разрешение
640 x 1136
DP
320 х 528
Айфон 6
разрешение
750 x 1334
DP
375 х 667
Iphone 6s
разрешение
1080 x 1920
DP
414 х 736
Galaxy S6
разрешение
1440 x 2560
DP
360 х 640
Примечание 4
разрешение
1440 x 2560
DP
400 х 853
Nexus 6
разрешение
1440 x 2560
DP
411 х 731
Ipad мини
разрешение
768 x 1024
DP
768 x 1024
IPad
разрешение
1536 x 2048
DP
728 x 1024
Типичный для ноутбука
разрешение
1366 x 768
DP
1366 x 768
Типичный рабочий стол
разрешение
1920 x 1080
DP
1920 x 1080