W3.CSS - Desain Responsif
W3.CSS memiliki beberapa kelas khusus untuk membuat desain yang responsif.
| No Sr | Nama & Deskripsi Kelas |
|---|---|
| 1 | w3-half Menetapkan wadah untuk menempati 1/2 nd dari jendela pada perangkat layar besar menengah atau. Jika layar lebih kecil dari 601 piksel, maka itu mengubah ukuran penampung menjadi 100%. |
| 2 | w3-third Menetapkan wadah untuk menempati 1/3 rd dari jendela pada perangkat layar besar menengah atau. Jika layar lebih kecil dari 601 piksel, maka itu mengubah ukuran penampung menjadi 100%. |
| 3 | w3-quarter Menetapkan wadah untuk menempati 1/4 th jendela pada perangkat layar besar menengah atau. Jika layar lebih kecil dari 601 piksel, maka itu mengubah ukuran penampung menjadi 100%. |
| 4 | w3-col Menentukan kolom dalam grid 12 kolom. |
| 5 | w3-row Menentukan container tanpa bantalan yang akan digunakan untuk kelas responsif. Kelas ini wajib untuk kelas responsif agar sepenuhnya responsif. |
Contoh
w3css_responsive_design.htm
<html>
<head>
<title>The W3.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-half w3-red">
<h2>w3-half</h2>
<p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-half">
<h2>w3-half</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-third w3-red">
<h2>w3-third</h2>
<p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-quarter w3-red">
<h2>w3-quarter</h2>
<p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.