Was ist Responsive Design?

Teil des Abschnitts Styling mit 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 auf einer Vielzahl von Geräten ein optimales Anzeigeerlebnis bieten – von Desktop-Computermonitoren bis hin zu Mobiltelefonen. Eine responsive Website passt ihr Layout, ihre Inhalte 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 besteht darin, sicherzustellen, dass Benutzer unabhängig vom verwendeten Gerät problemlos auf die Website zugreifen und mit ihr interagieren können.

Responsives 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 unterschiedliche 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 zum Surfen im Internet verwenden, ist responsives Design unerlässlich, um Websites benutzerfreundlich zu gestalten. Es sorgt dafür, dass deine Website auf jedem Gerät gut aussieht und einwandfrei funktioniert, und bietet den Nutzern eine reibungslose und konsistente Erfahrung.

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und zwei Bildern (<img>). Deine Aufgabe besteht darin, etwas grundlegendes CSS hinzuzufügen, damit die Elemente responsiv sind und der Unterschied zwischen einer festen Höhe und einer automatischen Höhe deutlich demonstriert wird. Befolge die folgenden Schritte:

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

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>