IT-Kurs CSS-Grundlagen 033_Responsives Layout

Responsives Layout

Responsives Layout ist eine Webdesign-Methode, die sich an verschiedene Bildschirmgrößen und Geräte anpassen kann. Durch die Verwendung von responsivem Layout kann eine Webseite auf verschiedenen Geräten eine gute Darstellungsqualität beibehalten, egal ob auf Desktop-Computern, Tablets oder Smartphones.

Media Queries

Mit CSS Media Queries können Sie je nach Geräteeigenschaften (wie Bildschirmbreite, Höhe, Gerätetyp usw.) unterschiedliche Stile anwenden. Dies ermöglicht es Ihnen, verschiedene Layouts für unterschiedliche Bildschirmgrößen zu definieren.

Beispiel:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* Tablet */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* Normales Handy */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* Kleine Bildschirme */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

Effekt:

Responsive Bilder

Verwenden Sie max-width: 100%;, um sicherzustellen, dass Bilder und Medienelemente auf kleinen Bildschirmen nicht über ihren Container hinausgehen. Beispiel:

1
    img {
2
      max-width: 100%; /* Maximale Bildbreite 100% des enthaltenden Elements */
3
      height: auto;    /* Seitenverhältnis beibehalten, Bildverzerrung vermeiden */
4
    }
5

6
    /* Bildgröße auf kleinen Bildschirmen anpassen */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* Maximale Bildbreite 50% des enthaltenden Elements */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

Effekt:

Viewport-Einstellungen

Verwenden Sie das <meta>-Tag, um den Viewport festzulegen und sicherzustellen, dass die Seite auf mobilen Geräten korrekt skaliert wird.

Beispiel:

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

Dieses Meta-Tag teilt mobilen Browsern mit, dass sie die Viewport-Breite auf die Breite des Geräts einstellen und das Dokument auf 100% seiner erwarteten Größe vergrößern sollen, um das Dokument in der für mobile Geräte optimierten Größe anzuzeigen.

Zusammen mit dem Viewport-Meta-Tag können Sie mehrere weitere Einstellungen verwenden, aber im Allgemeinen ist die obige Zeile das, was Sie verwenden möchten.

• initial-scale: Legt die anfängliche Vergrößerung der Seite fest, wir setzen sie auf 1.
• height: Legt eine bestimmte Höhe für den Viewport fest.
• minimum-scale: Legt die minimale Zoomstufe fest.
• maximum-scale: Legt die maximale Zoomstufe fest.
• user-scalable: Verhindert das Zoomen, wenn auf no gesetzt.

Vermeiden Sie die Verwendung von minimum-scale, maximum-scale und insbesondere user-scalable auf no, um sicherzustellen, dass Benutzer selbst verkleinern und vergrößern können.