HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

W3.CSS Integrierte Reaktionsfähigkeit

❮ Vorherige Nächste ❯

W3.CSS enthält ein reaktionsfähiges, Mobile-First-Grid-System zur Handhabung des Layouts:

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 Responsive Klassen

Das Rastersystem von W3.CSS reagiert, und die Spalten werden je nach Bildschirmgröße automatisch neu angeordnet:

Klasse Beschreibung
w3-halb Nimmt 1/2 des Fensters ein (auf mittleren und großen Bildschirmen)
w3-dritte Nimmt 1/3 des Fensters ein (auf mittleren und großen Bildschirmen)
w3-zweidrittel Nimmt 2/3 des Fensters ein (auf mittleren und großen Bildschirmen)
w3-Quartal Nimmt 1/4 des Fensters ein (auf mittleren und großen Bildschirmen)
w3-dreiviertel Nimmt 3/4 des Fensters ein (auf mittleren und großen Bildschirmen)
w3-Rest Nimmt den Rest der Spaltenbreite ein
w3-Spalte Definiert eine Spalte in einem responsiven Raster mit 12 Spalten
w3-mobil Fügt einer Zelle (Spalte) Mobile-First-Reaktionsfähigkeit hinzu.
Zeigt Elemente als Blockelemente auf Mobilgeräten an.

Die obigen responsiven Klassen müssen in einer w3-row- Klasse (oder w3-row-padding- Klasse) platziert werden, um vollständig responsive zu sein.

Klasse Beschreibung
w3-Reihe Container für reaktionsschnelle Klassen ohne Polsterung
w3-Zeilen-Padding Container für reaktionsschnelle Klassen mit 8 Pixel linker und rechter Auffüllung
w3-Inhalt Container für zentrierten Inhalt mit fester Größe
   
w3-hide-klein Blendet Inhalte auf kleinen Bildschirmen (weniger als 601 Pixel) aus
w3-Hide-Medium Blendet Inhalte auf mittleren Bildschirmen aus
w3-hide-large Blendet Inhalte auf großen Bildschirmen (größer als 992 Pixel) aus
   
l1 - l12 Responsive Größen für große Bildschirme
m1 - m12 Responsive Größen für mittlere Bildschirme
s1 - s12 Responsive Größen für kleine Bildschirme

Die w3-Halbklasse

Die Breite der Klasse w3-half beträgt 1/2 des übergeordneten Elements (style="width:50%").

Auf Bildschirmen kleiner als 601 Pixel wird die Größe auf 100 % angepasst.

w3-halb

w3-halb

Beispiel

<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>

Die w3-dritte Klasse

Die Breite der Klasse w3-third beträgt 1/3 des übergeordneten Elements (style="width:33.33%").

Auf Bildschirmen kleiner als 601 Pixel wird die Größe auf 100 % angepasst.

w3-dritte

w3-dritte

w3-dritte

Beispiel

<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>

Die w3-twothird-Klasse

Die Breite der Klasse w3-twothird beträgt 2/3 des übergeordneten Elements (style="width:66.66%").

Auf Bildschirmen kleiner als 601 Pixel wird die Größe auf 100 % angepasst. 

w3-zweidrittel

w3-dritte

Beispiel

<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>

Die w3-Quarter-Klasse

Die Breite der Klasse w3-quarter beträgt 1/4 des übergeordneten Elements (style="width:25%").

Auf Bildschirmen kleiner als 601 Pixel wird die Größe auf 100 % angepasst.

w3-Quartal

w3-Quartal

w3-Quartal

w3-Quartal

Beispiel

<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>

Die w3-Dreiviertel-Klasse

Die Breite der w3-threequarter- Klasse beträgt 3/4 des übergeordneten Elements (style="width:75%").

Auf Bildschirmen kleiner als 601 Pixel wird die Größe auf 100 % angepasst.

w3-dreiviertel

w3-Quartal

Beispiel

<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>

Kombinationen

w3-Quartal

w3-halb

w3-Quartal


w3-Quartal

w3-Quartal

w3-halb


w3-halb

w3-Quartal

w3-Quartal


w3-dritte

w3-zweidrittel


w3-Quartal

w3-dreiviertel

Verschachtelte Zeilen

Beispiel: w3-half Innerhalb von 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>

Spalten mit Rest

Die w3-col- Klasse definiert eine Spalte in einem 12-Spalten-Responsive-Raster.

Die Klasse w3-rest nimmt den Rest der Breite ein:

Ich bin 150px

Ich bin der Rest

Beispiel

<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>

Spalten mit Prozent

Sie können auch die CSS-Eigenschaft width verwenden, um die Breite in Prozent festzulegen:

20%

60%

20%

Beispiel

<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>

Die w3-content-Klasse

Die w3-content- Klasse definiert einen Container für zentrierten Inhalt mit fester Größe. Verwenden Sie die CSS-Eigenschaft max-width, um die Standardbreite (980 Pixel) zu überschreiben.

Beispiel

<body class="w3-content" style="max-width:500px">

  page content...

</body>

w3-row vs. w3-row-padding

Die Klasse w3-row definiert einen Container ohne Padding, während die Klasse w3-row- padding jeder Spalte eine linke und rechte Padding von 8 Pixel hinzufügt:

w3-Reihe:

w3-dritte

w3-dritte

w3-dritte

w3-Zeilen-Padding:

w3-dritte

w3-dritte

w3-dritte

w3-Reihe:

w3-Zeilen-Padding:

Beispiel

<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>

Gepolsterte Reihen dehnen

Die Klasse w3-stretch entfernt den rechten und linken Rand von einem Element. Diese Klasse wird oft verwendet, um eine gepolsterte Reihe zu dehnen:

Ein Beispiel mit w3-stretch:

Ein Beispiel ohne w3-stretch:

Beispiel

<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>

Responsives Anzeigen/Ausblenden

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:

w3-hide-small will be hidden on small screens (phones)

w3-hide-medium will be hidden on medium screens (tablets)

w3-hide-large will be hidden on large screens (laptops/desktop)

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!

1
2
3
4
5
6
7
8
9
10
11
12

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.

1
2
3
4
5
6
7
8
9
10
11
12

You will learn a lot more about the fluid grid in a later chapter.


❮ Previous Next ❯