Was machen wir?    |      Referenzen      |        Quick Kontakt

Kontakt

MEDIA QUERIES – RESPONSIVE DESIGN

Inhaltsverzeichnis

Was sind Media Queries?

CSS-Media Queries sind eine Möglichkeit, den Browser nach bestimmten Merkmalen, Funktionen und Benutzereinstellungen auszurichten und dann Stile anzuwenden oder anderen Code basierend auf diesen Dingen auszuführen. Deswegen hier unsere Media Queries Vorlage. Media Queries sind ein einfaches Mittel um das responsive Design für Webseiten anzupassen Hier eine Media Queries Vorlage für Euer Stylesheet/CSS. Damit sind die gängigsten mobilen Ansichten abgedeckt.

Gängige Bildschirmgrößen / Breakpoints

320px — 480px: Mobilgeräte 481px — 768px: iPads, Tablets 769px — 1024px: Kleine Bildschirme, Laptops 1025px — 1200px: Desktops, große Bildschirme 1201px und mehr —  Extra große Bildschirme, Fernseher Damit Deine Webseite auf Handys, Tablets, Laptops und Desktop-Bildschirmen gut aussieht.

Media Queries Standard Vorlage

<link rel=“stylesheet“ href=“/templates/ihr-template/css/media-queries.css“> 
				
					@media (min-width: 1200px)
{
/* Beispiel: Jede Spalte in der Tabelle abwechselnd farbig  */
tr:nth-of-type(odd) {background-color: #f5f5f5;}
}

@media (min-width: 980px) and (max-width: 1199px)
{
}

@media (min-width: 768px) and (max-width: 979px)
{
}

@media (min-width: 480px) and (max-width: 767px)
{
}

@media (max-width: 479px)
{
/* Beispiel: Responsive Tabelle */
table {overflow-x:auto;}
}

Media Queries vs. clamp()

Media Queries:

Dienen dazu, Layouts und Strukturen je nach Bildschirmgröße umzuschalten (Spalten, Abstände, Anordnung).
Am Beispiel Typografie, ändert sich diese stufig an festen Bildschirmbreiten und erfordert mehrere Regeln zur Pflege.

clamp():
Skaliert Texte und Überschriften fließend innerhalb definierter Grenzen, wirkt harmonischer im Layout und reduziert den Anpassungsaufwand.
Schriftgrößen fließen und sind gut zu skalieren, damit diese auf allen Bildschirmgrößen gleichmäßig wirkt.

				
					/* =========================================================
   HEADINGS – KOMPLETT (h1–h6)
   Einheiten: rem + clamp
   Breakpoints: rem
   ========================================================= */


/* =========================================================
   Große Desktops (≥ 1200px | ≥ 75rem)
   ========================================================= */
@media (min-width: 75rem) {

  h1, .h1 { font-size: 4rem !important; }
  h2, .h2 { font-size: 2rem !important; }

  h3, .h3 { font-size: 1.6rem !important; }
  h4, .h4 { font-size: 1.3rem !important; }
  h5, .h5 { font-size: 1.1rem !important; }
  h6, .h6 { font-size: 1rem !important; }
}


/* =========================================================
   Desktop / Laptop (992–1199px | 62rem–74.99875rem)
   ========================================================= */
@media (min-width: 62rem) and (max-width: 74.99875rem) {

  h1, .h1 { font-size: 3rem !important; }
  h2, .h2 { font-size: 1.5rem !important; }

  h3, .h3 { font-size: 1.4rem !important; }
  h4, .h4 { font-size: 1.2rem !important; }
  h5, .h5 { font-size: 1.05rem !important; }
  h6, .h6 { font-size: 0.95rem !important; }
}


/* =========================================================
   Tablets & Smartphones (≤ 991px | < 61.99875rem)
   Clamp = fein & flüssig
   ========================================================= */
@media (max-width: 61.99875rem) {

  /* h1 */
  h1, .h1 {
    font-size: clamp(1.8rem, calc(1.43rem + 0.10vw), 2rem) !important;
  }

  /* h2 */
  h2, .h2 {
    font-size: clamp(1.2rem, calc(0.70rem + 0.104vw), 1.5rem) !important;
  }

  /* h3 */
  h3, .h3 {
    font-size: clamp(1.2rem, calc(1.05rem + 0.4vw), 1.4rem) !important;
  }

  /* h4 */
  h4, .h4 {
    font-size: clamp(1.1rem, calc(1rem + 0.3vw), 1.2rem) !important;
  }

  /* h5 */
  h5, .h5 {
    font-size: clamp(1rem, calc(0.95rem + 0.2vw), 1.05rem) !important;
  }

  /* h6 */
  h6, .h6 {
    font-size: clamp(0.9rem, calc(0.85rem + 0.15vw), 0.95rem) !important;
  }
}
Branche