BESTE WEBSITE FÜR WEBENTWICKLER
HTML5-Lektionen für Anfänger

Ua En Es

HTML -Responsive-Webdesign


Beim Responsive Webdesign (RWD) geht es darum, Webseiten zu erstellen, die auf allen Geräten gut aussehen!

Ein responsives Webdesign passt sich automatisch an unterschiedliche Bildschirmgrößen und Ansichtsfenster an.


Sich anpassendes Webdesign

Was ist Responsive Webdesign?

Beim Responsive Web Design geht es um die Verwendung von HTML und CSS, um die Größe einer Website automatisch zu ändern, auszublenden, zu verkleinern oder zu vergrößern, damit sie auf allen Geräten (Desktops, Tablets und Telefone) gut aussieht:

Try it Yourself »


Festlegen des Ansichtsfensters

Um eine responsive Website zu erstellen, fügen Sie allen Ihren Webseiten das folgende <meta>-Tag hinzu:

Beispiel

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Try it Yourself »

Dadurch wird der Darstellungsbereich Ihrer Seite festgelegt, der dem Browser Anweisungen zur Steuerung der Abmessungen und Skalierung der Seite gibt.

Hier ist ein Beispiel einer Webseite ohne dem Viewport-Meta-Tag und derselben Webseite mit dem Viewport-Meta-Tag:

Ohne das Meta-Tag viewport:
Ohne das Meta-Tag viewport
Mit dem Meta-Tag viewport:
Mit dem Meta-Tag viewport

Tipp: Wenn Sie diese Seite auf einem Telefon oder Tablet durchsuchen, können Sie auf die beiden Links oben klicken, um den Unterschied zu sehen.


Responsive Bilder

Responsive Bilder sind Bilder, die sich gut an jede Browsergröße anpassen lassen.

Verwenden der width-Eigenschaft

Wenn die CSS-Eigenschaft width auf 100 % gesetzt ist, reagiert das Bild und wird vergrößert und verkleinert:

Girls

Beispiel

<img src="img_girl.jpg" style="width:100%;">
Try it Yourself »

Beachten Sie, dass das Bild im obigen Beispiel so skaliert werden kann, dass es größer als seine Originalgröße ist. In vielen Fällen ist es eine bessere Lösung, stattdessen die Eigenschaft max-width zu verwenden.

Verwenden der max-width-Eigenschaft

Wenn die Eigenschaft max-width auf 100 % gesetzt ist, wird das Bild bei Bedarf verkleinert, aber niemals vergrößert, sodass es größer als seine Originalgröße ist:

Mädchen

Beispiel

<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Try it Yourself »

Je nach Browserbreite unterschiedliche Bilder anzeigen

Mit dem HTML-Element <picture> können Sie verschiedene Bilder für verschiedene Browserfenstergrößen definieren.

Ändern Sie die Größe des Browserfensters, um zu sehen, wie sich das Bild unten je nach Breite ändert:

Blumen

Beispiel

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>
Try it Yourself »

Responsive Textgröße

Die Textgröße kann mit der Einheit "vw" eingestellt werden, was der "viewport width" entspricht.

Auf diese Weise folgt die Textgröße der Größe des Browserfensters:

Hello World

Ändern Sie die Größe des Browserfensters, um zu sehen, wie sich die Textgröße skaliert.

Beispiel

<h1 style="font-size:10vw">Hello World</h1>
Try it Yourself »

Viewport ist die Größe des Browserfensters. 1vw = 1 % der Breite des Ansichtsfensters. Wenn das Ansichtsfenster 50 cm breit ist, beträgt 1 vw 0,5 cm.


Medienabfragen

Neben der Größenänderung von Text und Bildern ist es auch üblich, auf responsiven Webseiten Medienabfragen zu verwenden.

Mit Medienabfragen können Sie völlig unterschiedliche Stile für unterschiedliche Browsergrößen definieren.

Beispiel: Ändern Sie die Größe des Browserfensters, um zu sehen, dass die drei folgenden div-Elemente auf großen Bildschirmen horizontal und auf kleinen Bildschirmen vertikal gestapelt angezeigt werden:

Main Content


Right Content


Beispiel

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
Try it Yourself »

Tipp: Um mehr über Medienabfragen und Responsive Webdesign zu erfahren, lesen Sie unser RWD-Tutorial.


Responsive Webseite – Vollständiges Beispiel

Eine responsive Webseite sollte auf großen Desktop-Bildschirmen und auf kleinen Mobiltelefonen gut aussehen.

Try it Yourself »


Responsives Webdesign – Frameworks

Alle gängigen CSS-Frameworks bieten responsives Design.

Sie sind kostenlos und einfach zu verwenden.

W3.CSS

W3.CSS ist ein modernes CSS-Framework mit standardmäßiger Unterstützung für Desktop-, Tablet- und Mobildesign.

W3.CSS ist kleiner und schneller als ähnliche CSS-Frameworks.

W3.CSS ist als hochwertige Alternative zu Bootstrap konzipiert.

W3.CSS ist so konzipiert, dass es unabhängig von jQuery oder anderen JavaScript-Bibliotheken ist.

W3.CSS Demo

Ändern Sie die Größe der Seite, um die Reaktionsfähigkeit zu sehen!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Beispiel

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
 <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>
Try it Yourself »

Um mehr über W3.CSS zu erfahren, lesen Sie unser W3.CSS-Tutorial.


Bootstrap

Ein weiteres beliebtes CSS-Framework ist Bootstrap. Bootstrap verwendet HTML, CSS und jQuery, um responsive Webseiten zu erstellen.

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Beispiel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
   </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
 </div>
</div>

</body>
</html>
Try it Yourself »

Um mehr über Bootstrap zu erfahren, gehen Sie zu unserem Bootstrap-Tutorial.



Kommentare