W3.CSS Wbudowana responsywność
W3.CSS zawiera responsywny, mobilny system grid do obsługi układu:
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
odpoczynek
1/4
odpoczynek
100px
45px
odpoczynek
W3.CSS Responsywne klasy
System siatki W3.CSS jest responsywny, a kolumny zmienią się automatycznie w zależności od rozmiaru ekranu:
| Klasa | Opis |
|---|---|
| w3-połowa | Zajmuje 1/2 okna (na średnich i dużych ekranach) |
| w3-trzeci | Zajmuje 1/3 okna (na średnich i dużych ekranach) |
| w3-dwie trzecie | Zajmuje 2/3 okna (na średnich i dużych ekranach) |
| w3 kwartał | Zajmuje 1/4 okna (na średnich i dużych ekranach) |
| w3-trzy czwarte | Zajmuje 3/4 okna (na średnich i dużych ekranach) |
| w3-odpoczynek | Zajmuje resztę szerokości kolumny |
| w3-kolor | Definiuje jedną kolumnę w 12-kolumnowej siatce responsywnej |
| w3-mobilny | Dodaje do komórki (kolumny) responsywność zorientowaną na urządzenia mobilne. Wyświetla elementy jako elementy blokowe na urządzeniach mobilnych. |
Powyższe klasy responsywne muszą być umieszczone w klasie w3-row (lub klasie w3-row-padding ), aby były w pełni responsywne.
| Klasa | Opis |
|---|---|
| w3-wiersz | Kontener na zajęcia responsywne, bez wypełnienia |
| w3-wiersz-wypełnienie | Pojemnik na zajęcia responsywne, z wypełnieniem 8px lewy i prawy |
| zawartość w3 | Pojemnik na zawartość wyśrodkowaną o stałym rozmiarze |
| w3-ukryj-mały | Ukrywa treści na małych ekranach (mniej niż 601px) |
| w3-ukryj-średni | Ukrywa treści na średnich ekranach |
| w3-ukryj-duży | Ukrywa treści na dużych ekranach (większych niż 992px) |
| l1 - l12 | Responsywne rozmiary dla dużych ekranów |
| m1 - m12 | Responsywne rozmiary dla średnich ekranów |
| s1 - s12 | Responsywne rozmiary dla małych ekranów |
W3-połowa klasy
Szerokość klasy w3-half to 1/2 elementu nadrzędnego (style="szerokość:50%").
Na ekranach mniejszych niż 601 pikseli zmienia rozmiar do 100%.
w3-połowa
w3-połowa
Przykład
<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-trzecia klasa
Szerokość trzeciej klasy w3 to 1/3 elementu rodzica (style="width:33.33%").
Na ekranach mniejszych niż 601 pikseli zmienia rozmiar do 100%.
w3-trzeci
w3-trzeci
w3-trzeci
Przykład
<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>
Klasa w3-dwa trzecia
Szerokość klasy w3-twothird stanowi 2/3 elementu rodzica (style="width:66.66%").
Na ekranach mniejszych niż 601 pikseli zmienia rozmiar do 100%.
w3-dwie trzecie
w3-trzeci
Przykład
<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>
Klasa w3 kwartał
Szerokość klasy w3quarter to 1/4 elementu nadrzędnego (style="szerokość:25%").
Na ekranach mniejszych niż 601 pikseli zmienia rozmiar do 100%.
w3 kwartał
w3 kwartał
w3 kwartał
w3 kwartał
Przykład
<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>
Klasa w3 trzy czwarte
Szerokość klasy w3-threequarter to 3/4 elementu nadrzędnego (style="szerokość:75%").
Na ekranach mniejszych niż 601 pikseli zmienia rozmiar do 100%.
w3-trzy czwarte
w3 kwartał
Przykład
<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>
Kombinacje
w3 kwartał
w3-połowa
w3 kwartał
w3 kwartał
w3 kwartał
w3-połowa
w3-połowa
w3 kwartał
w3 kwartał
Zagnieżdżone wiersze
Przykład: w3-połowa Wewnątrz w3-połowa
<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>
Kolumny korzystające z odpoczynku
Klasa w3-col definiuje jedną kolumnę w 12-kolumnowej siatce responsywnej.
Klasa w3-rest zajmie resztę szerokości:
Mam 150 pikseli
ja jestem resztą
Przykład
<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>
Kolumny używające procentów
Możesz także użyć właściwości CSS width, aby ustawić szerokość w procentach:
20%
60%
20%
Przykład
<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>
Klasa treści w3
Klasa w3 content definiuje kontener na zawartość wyśrodkowaną o stałym rozmiarze. Użyj właściwości CSS max-width, aby zastąpić domyślną szerokość (980px).
Przykład
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-wiersz vs. w3-wiersz-dopełnienie
Klasa w3-row definiuje kontener bez dopełnienia, podczas gdy klasa w3-row-padding dodaje 8px dopełnienie lewe i prawe do każdej kolumny:
w3-wiersz:
w3-trzeci
w3-trzeci
w3-trzeci
w3-wiersz dopełnienia:
w3-trzeci
w3-trzeci
w3-trzeci
w3-wiersz:
w3-wiersz dopełnienia:
Przykład
<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>
Rozciągliwe wyściełane rzędy
Klasa w3-stretch usuwa prawy i lewy margines z elementu. Ta klasa jest często używana do rozciągania dopełnionego wiersza:
Przykład z rozciągliwością w3:
Przykład bez rozciągania w3:
Przykład
<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>
Responsywne Pokaż / Ukryj
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.