css mit Adi Prinz

Responsives Webdesign

Responsives Webdesign ist ein Ansatz zur Webentwicklung, der darauf abzielt, Webseiten so zu gestalten, dass sie auf einer Vielzahl von Geräten und Bildschirmgrößen gut aussehen und funktionieren. Es geht darum, ein optimales Benutzererlebnis zu gewährleisten, unabhängig davon, ob der Benutzer ein Smartphone, Tablet, Laptop oder Desktop-Computer verwendet.

Merkmale des responsiven Webdesigns:

• Flexibles Layout
• Anpassbare Bilder und Medien
• Media Queries
• Mobile-First Ansatz

Der <meta>-Tag mit dem Namen "viewport" ist entscheidend für responsives Webdesign. Er stellt sicher, dass die Webseite auf mobilen Geräten korrekt angezeigt wird, indem er die Art und Weise steuert, wie der Browser die Seitenbreite und Skalierung interpretiert.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bedeutung der Attribute:

• width=device-width:
  Setzt die Breite des Viewports auf die Breite des Gerätes. Dies stellt sicher, dass die Webseite die volle Breite des Gerätes nutzt.
• initial-scale=1.0:
  Setzt den anfänglichen Zoom-Level auf 1.0, was bedeutet, dass die Webseite ohne Vergrößerung oder Verkleinerung dargestellt wird.

Media Queries

Eine CSS Media Query ist eine Technik, die es ermöglicht, CSS-Regeln basierend auf bestimmten Bedingungen wie der Bildschirmgröße, der Geräteauflösung, der Ausrichtung (Hoch- oder Querformat) und anderen Medieneigenschaften anzuwenden. Mit Media Queries kann man responsive Designs erstellen, die sich an verschiedene Bildschirmgrößen und Gerätetypen anpassen.

Syntax

Eine Media Query besteht aus einer @media-Regel, gefolgt von einem Medientyp und einer oder mehreren Bedingungen:

/* Standard CSS-Regeln für alle Bildschirmgrößen */
body {
    font-size: 16px;
}

/* CSS-Regeln für Bildschirme mit einer Breite von maximal 600px */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* CSS-Regeln für Bildschirme mit einer Breite von mindestens 601px */
@media (min-width: 601px) {
    body {
        font-size: 18px;
    }
}

In diesem Beispiel wird die Schriftgröße des body-Elements basierend auf der Bildschirmbreite angepasst. Für Bildschirme mit einer Breite von maximal 600px wird die Schriftgröße auf 14px reduziert, während sie für Bildschirme mit einer Breite von mindestens 601px auf 18px erhöht wird.

Mobile first

Mobile First ist ein Design- und Entwicklungsansatz im Webdesign, bei dem zunächst die Version einer Webseite oder Anwendung für mobile Geräte konzipiert und gestaltet wird. Erst danach werden Layouts und Funktionen für größere Bildschirme wie Tablets und Desktops hinzugefügt. Dieser Ansatz berücksichtigt die wachsende Zahl von Nutzern, die über mobile Geräte auf das Internet zugreifen, und stellt sicher, dass diese Nutzer eine optimale Erfahrung haben.

/* Basisstile für mobile Geräte */
body {
    font-size: 16px;
    margin: 10px;
}

nav {
    display: none; /* Mobiles Menü standardmäßig ausblenden */
}

header, main, footer {
    padding: 10px;
}

/* Styles für Tablets */
@media (min-width: 768px) {
    body {
        font-size: 18px;
        margin: 20px;
    }

    nav {
        display: block; /* Menü anzeigen */
    }

    header, main, footer {
        padding: 20px;
    }
}

/* Styles für Desktops */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
        margin: 30px;
    }

    header, main, footer {
        padding: 30px;
    }
}

Der Mobile-First-Ansatz ist ein bewährtes Konzept, um sicherzustellen, dass Webseiten sowohl auf mobilen als auch auf größeren Geräten gut funktionieren und ansprechend aussehen.

@container

Die @container Regel in CSS ist Teil der Container Queries, die es ermöglichen, Stile basierend auf den Eigenschaften eines Containers anzuwenden, anstatt auf den Eigenschaften des Ansichtsfensters (Viewport). Dies ist besonders nützlich für das Erstellen von responsiven Designs, die sich anpassen, wenn der Container eine bestimmte Größe erreicht, unabhängig von der Größe des Ansichtsfensters.

<div class="container">
<div class="box"></div>
</div>

.container {
width: 50%;
container-type: inline-size;
border: 1px solid #000;
padding: 10px;
}

.box {
width: 100%;
height: 100px;
background: lightblue;
}

@container (min-width: 300px) {
.box {
background: lightgreen;
}
}
@container (min-width: 600px) {
.box {
background: lightcoral;
}
}

<div class="box"></div>

.box {
width: 100%;
height: 100px;
background: lightblue;
}

@media (min-width: 600px) {
.box {
background: lightgreen;
}
}

@media (min-width: 900px) {
.box {
background: lightcoral;
}
}

<div class="container">
<div class="box"></div>
</div>

.container {
width: 50%;
container-type: inline-size;
border: 1px solid #000;
padding: 10px;
}

.box {
width: 100%;
height: 100px;
background: lightblue;
}

@container (min-width: 300px) {
.box {
background: lightgreen;
}
}

@container (min-width: 600px) {
.box {
background: lightcoral;
}
}

element {
container-type: inline-size | block-size | size;
}