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;} }

Man kann die Ansicht nach Gerätetyp, Bildschirmgröße/Auflösung jedoch noch weiter festlegen und optimieren:

@media all and (min-width: 1024px) and (max-width: 1280px) { }

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

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

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

/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }

/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
}

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}