Was ist Responsive Design?

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 61 von 76.

Im Webdesign ist Responsive Design ein Ansatz, der darauf abzielt, Webseiten zu erstellen, die sich anpassen und eine optimale Benutzererfahrung auf einer Vielzahl von Geräten bieten, von Desktop-Monitoren bis hin zu Mobiltelefonen. Eine responsive Website passt ihr Layout, ihren Inhalt und ihre Funktionalität automatisch an die Bildschirmgröße, Auflösung und Ausrichtung des Geräts an, auf dem sie angezeigt wird. Das Ziel von Responsive Design ist es, sicherzustellen, dass Benutzer problemlos auf die Website zugreifen und mit ihr interagieren können, unabhängig davon, welches Gerät sie verwenden.

Responsive Design wird durch eine Kombination von Techniken erreicht, darunter:

Flexible Raster und Layouts: Verwendung von CSS Grid oder Flexbox, um Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen können.

Flexible Bilder und Medien: Sicherstellen, dass Bilder und andere Medien proportional zum Layout skaliert werden.

Media Queries: Anwenden unterschiedlicher CSS-Stile basierend auf den Eigenschaften des Geräts, wie z. B. Bildschirmbreite, -höhe und -ausrichtung.

Da immer mehr Menschen mobile Geräte nutzen, um im Internet zu surfen, ist Responsive Design unerlässlich, um Websites benutzerfreundlich zu gestalten. Es stellt sicher, dass Ihre Website auf jedem Gerät gut aussieht und einwandfrei funktioniert, was den Nutzern ein reibungsloses und konsistentes Erlebnis bietet.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und zwei Bildern (<img>) zur Verfügung gestellt. Ihre Aufgabe ist es, grundlegendes CSS hinzuzufügen, um die Elemente responsiv zu gestalten und den Unterschied zwischen fester Höhe und automatischer Höhe deutlich zu demonstrieren. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <h1>-Element abzielt. Setzen Sie die font-size auf 5vw. Dadurch wird die Schriftgröße der Überschrift responsiv an die Breite des Viewports angepasst.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie die font-size auf 3vw. Dadurch wird die Schriftgröße des Absatzes responsiv an die Breite des Viewports angepasst.
Schreiben Sie eine CSS-Regel, die auf die Klasse .fixed-height abzielt. Setzen Sie die width auf 100% und die height auf 150px. Dies erzeugt ein verzerrtes Bild, indem eine feste Höhe erzwungen wird.
Schreiben Sie eine CSS-Regel, die auf die Klasse .auto-height abzielt. Setzen Sie die width auf 100% und die height auf auto. Dadurch wird das Bild proportional skaliert, während sein Seitenverhältnis beibehalten wird.
Schreiben Sie CSS-Regeln für die Container (.container), um ihnen eine width von 300px, einen border von 2px solid #ccc, einen margin von 20px und ein padding von 10px zu geben.

Spickzettel

Responsive Design erstellt Webseiten, die sich durch flexible Layouts, skalierbare Medien und Media Queries an verschiedene Geräte und Bildschirmgrößen anpassen.

Schlüsseltechniken für Responsive Design:

Flexible Raster und Layouts: Verwendung von CSS Grid oder Flexbox
Flexible Bilder und Medien: Proportionale Skalierung mit dem Layout
Media Queries: Anwendung verschiedener Stile basierend auf Geräteeigenschaften

Verwenden Sie Viewport-Einheiten für responsive Typografie:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

Machen Sie Bilder mit der richtigen Skalierung responsiv:

/* Fixed height - causes distortion */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* Auto height - maintains aspect ratio */
.auto-height {
  width: 100%;
  height: auto;
}

Probier es selbst

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>