Wie passe ich mein Layout
für verschiedene Ausgabegeräte mit @MEDIA an?

REM (absolut)

Hinweis: REM (Root-EM) bezieht sich immer auf die FONT-SIZES des HTML Elements. Diese kann absolut mit PX bestimmt sein. Änder man im @MEDIA das HTML-Element, dann ändern sich alle mit REM bestimmten Größen. Man überschreibt mit dieser Technik allerdings die individuellen Einstellungen des Browsers und sollte prüfen, dass die verwendete Schriften ausreichende Größe und leseförderliche Kontraste aufweist.

@media Typen

CSSBedeutung
@media (...) AND (...) { ... }Enthält spezifische Angaben für Ausgabegeräte. In runder Klammer werden diese näher bestimmt und können mit Boolschen Attributen wie AND noch feiner definiert werden. Die geschweifte Klammer enthält die Elemente, welche sich ändern sollen. In der geschweiften Klammer werden die Elemente wie in CSS üblich notiert. Am Ende steht also eine doppelte geschweifte Klammer. Die @MEDIA Angaben sollten am Ende der CSS Angaben stehen. Es können beliebige Definitionen aneinandergereiht werden.
allGilt für alle Geräte-Formen. Ist der Standardwert und muss nicht angegeben werden.
printGilt für Drucker und druckbezogene Ausgabeformate wie z.B. PDF.
screenComputerbildschirme, Tabletts, Beamer, Smartphones etc.

@media Eigenschaften

CSSBedeutung
aspect-ratioDas Verhältnis von Breite zu Höhe des Browsers.
device-heightDie Höhe von dem Gerät.
device-widthDie Breite von dem Gerät.
heightDie Höhe von dem Browser. Auf einem Geräten kann der Browser unabhängig von der eingestellten Auflösung verändert werden.
max-device-heightMaximale Höhe von dem Gerät.
max-device-widthMaximale Breite von dem Gerät.
max-heightMaximale Höhe des Browsers.
max-widthMaximale Breite des Browsers.
min-device-widthDie minimale Breite von dem Gerät.
min-device-heightDie minimale Höhe von dem Gerät.
min-heightDie minimale Höhe von dem Browser.
min-widthDie minimale Breite des Browsers.
orientationLandscape (Querformat) oder Portrait (Hochformat)
widthDie Breite von dem Browser.
ANDEs können beliebige Media-Eigenschaften mit AND aneinandergereiht werden.

Responsive Tabelle

Hinweis: Am Beispiel einer Tabelle kann man sehr gut den Unterschied zwsichen Desktop Ansicht und Smartphone darstellen. Im wesentlichen wird das Ein- und Ausblenden über geänderte DISPLAY Werte erreicht. Natürlich ist die technische Ebene nur eine Seite der Medaille. Man muss in der mobilen Ansicht andere Schwerpunkte setzen. Auf dem Smartphone ist scrollen von oben nach unten ein typischer Vorgang und demnach müssen mit @MEDIA die Elemente untereinander angeordnet werden. Bei einigen Elementen ist es z.B. besser den Tabellenkopf zu wiederholen. Als praktisch erweisen sich dafür PSEUDO-ELEMENTE mit Bezug auf HTML Attribute.

@media Typen

CSSBedeutung
@media (...) AND (...) { ... }Enthält spezifische Angaben für Ausgabegeräte. In runder Klammer werden diese näher bestimmt und können mit Boolschen Attributen wie AND noch feiner definiert werden. Die geschweifte Klammer enthält die Elemente, welche sich ändern sollen. In der geschweiften Klammer werden die Elemente wie in CSS üblich notiert. Am Ende steht also eine doppelte geschweifte Klammer. Die @MEDIA Angaben sollten am Ende der CSS Angaben stehen. Es können beliebige Definitionen aneinandergereiht werden.
allGilt für alle Geräte-Formen. Ist der Standardwert und muss nicht angegeben werden.
printGilt für Drucker und druckbezogene Ausgabeformate wie z.B. PDF.
screenComputerbildschirme, Tabletts, Beamer, Smartphones etc.

@media Eigenschaften

CSSBedeutung
aspect-ratioDas Verhältnis von Breite zu Höhe des Browsers.
device-heightDie Höhe von dem Gerät.
device-widthDie Breite von dem Gerät.
heightDie Höhe von dem Browser. Auf einem Geräten kann der Browser unabhängig von der eingestellten Auflösung verändert werden.
max-device-heightMaximale Höhe von dem Gerät.
max-device-widthMaximale Breite von dem Gerät.
max-heightMaximale Höhe des Browsers.
max-widthMaximale Breite des Browsers.
min-device-widthDie minimale Breite von dem Gerät.
min-device-heightDie minimale Höhe von dem Gerät.
min-heightDie minimale Höhe von dem Browser.
min-widthDie minimale Breite des Browsers.
orientationLandscape (Querformat) oder Portrait (Hochformat)
widthDie Breite von dem Browser.
ANDEs können beliebige Media-Eigenschaften mit AND aneinandergereiht werden.

Background Fokuspoint

Hinweis: Hintergrundbilder, die einfach nur zentriert werden, haben unsichtbaren Bildinhalt, insofern dieser nicht mittig ist. Setzt man die Prozentwerte von BACKGROUND-POSITION auf den individuellen Fokuspoint, ist dieser auch bei extremen @MEDIA-Verhältnissen und ASPECT-RATIOS sichtbar. Die Prozentwerte von dem Fokuspoint kann man leicht mit z. B. Adobe Photoshop ermitteln.

@media Typen

CSSBedeutung
@media (...) AND (...) { ... }Enthält spezifische Angaben für Ausgabegeräte. In runder Klammer werden diese näher bestimmt und können mit Boolschen Attributen wie AND noch feiner definiert werden. Die geschweifte Klammer enthält die Elemente, welche sich ändern sollen. In der geschweiften Klammer werden die Elemente wie in CSS üblich notiert. Am Ende steht also eine doppelte geschweifte Klammer. Die @MEDIA Angaben sollten am Ende der CSS Angaben stehen. Es können beliebige Definitionen aneinandergereiht werden.
allGilt für alle Geräte-Formen. Ist der Standardwert und muss nicht angegeben werden.
printGilt für Drucker und druckbezogene Ausgabeformate wie z.B. PDF.
screenComputerbildschirme, Tabletts, Beamer, Smartphones etc.

@media Eigenschaften

CSSBedeutung
aspect-ratioDas Verhältnis von Breite zu Höhe des Browsers.
device-heightDie Höhe von dem Gerät.
device-widthDie Breite von dem Gerät.
heightDie Höhe von dem Browser. Auf einem Geräten kann der Browser unabhängig von der eingestellten Auflösung verändert werden.
max-device-heightMaximale Höhe von dem Gerät.
max-device-widthMaximale Breite von dem Gerät.
max-heightMaximale Höhe des Browsers.
max-widthMaximale Breite des Browsers.
min-device-widthDie minimale Breite von dem Gerät.
min-device-heightDie minimale Höhe von dem Gerät.
min-heightDie minimale Höhe von dem Browser.
min-widthDie minimale Breite des Browsers.
orientationLandscape (Querformat) oder Portrait (Hochformat)
widthDie Breite von dem Browser.
ANDEs können beliebige Media-Eigenschaften mit AND aneinandergereiht werden.

picture

Hinweis: Mit dem PICTURE-Element und den darin definierten SOURCE können auf die Darstellungsgröße optimierte Bilder verwendet werden. Normalerweise nimmt man dafür das gleiche Motiv, als Beispiel haben wir hier unterschiedliche gewählt. Dies spart bei den kleinen Geräten erheblich Ladezeit. In modernen Browsern wird PICTURE unterstüzt, Firefox verhält sich leicht anders. Es entsteht viel Quellcode pro Bild, insofern macht das PICTURE-Element in automatisierten Workflows Sinn.

Empfehlung: Das gezeigte Beispiel für PICTURE ist besser mit den Google Chrome-Devtools zu untersuchen. Also unten Speichern und damit auf dem Desktop prüfen.

@media Typen

CSSBedeutung
@media (...) AND (...) { ... }Enthält spezifische Angaben für Ausgabegeräte. In runder Klammer werden diese näher bestimmt und können mit Boolschen Attributen wie AND noch feiner definiert werden. Die geschweifte Klammer enthält die Elemente, welche sich ändern sollen. In der geschweiften Klammer werden die Elemente wie in CSS üblich notiert. Am Ende steht also eine doppelte geschweifte Klammer. Die @MEDIA Angaben sollten am Ende der CSS Angaben stehen. Es können beliebige Definitionen aneinandergereiht werden.
allGilt für alle Geräte-Formen. Ist der Standardwert und muss nicht angegeben werden.
printGilt für Drucker und druckbezogene Ausgabeformate wie z.B. PDF.
screenComputerbildschirme, Tabletts, Beamer, Smartphones etc.

print

Hinweis: Wenn Webseiten ausgedruckt werden, dann gelten andere Anforderungen. Absolute Maßeinheiten wie CM, MM und bei Schriftgrößen PT. Dunkle Hintergrundflächen vielleicht in Weiß umwandeln um Farbe zu sparen und es kann auch Hilfreich sein Links als Ergänzung noch einmal in voller URL ausführen. Dies kann mit einem für PRINT spezifisches @MEDIA ergänzt werden. Dieses Beispiel am Besten unten SPEICHERN und dann mit dem Browser eine PDF erzeugen. Auf dem Bildschirm wird man die Angaben bei @media PRINT nicht sehen können.

@media Typen

CSSBedeutung
@media (...) AND (...) { ... }Enthält spezifische Angaben für Ausgabegeräte. In runder Klammer werden diese näher bestimmt und können mit Boolschen Attributen wie AND noch feiner definiert werden. Die geschweifte Klammer enthält die Elemente, welche sich ändern sollen. In der geschweiften Klammer werden die Elemente wie in CSS üblich notiert. Am Ende steht also eine doppelte geschweifte Klammer. Die @MEDIA Angaben sollten am Ende der CSS Angaben stehen. Es können beliebige Definitionen aneinandergereiht werden.
allGilt für alle Geräte-Formen. Ist der Standardwert und muss nicht angegeben werden.
printGilt für Drucker und druckbezogene Ausgabeformate wie z.B. PDF.
screenComputerbildschirme, Tabletts, Beamer, Smartphones etc.

@FONT-FACE

Hinweis: Am Ende muss die Seite schnell sein und soll eine gute Bewertung von Google erhalten. Setzt man Webfonts ein, so sollten die Schriften unbedingt mit @FONT-FACE eingebunden werden. Mit den Formaten WOFF und WOFF2 deckt man die Browser ab. Allerdings sollte man prüfen, ob die zusätzliche Ladezeit des Webfonts auch Vorteile in der Optik bringt. Am schnellsten sind immer noch Standardsystemschriften wie z.B. Verdana. Google bewertet letztlich @FONT-FACE deutlich besser als eine Einbindung über ihren eigenen Webfonts-Server. @FONT-FACE ist wesentlicher Bestandteil mobiler Webseiten und kann über diesen Aspekt im responsiven Design gruppiert werden.

@font-face

CSSBedeutung
@font-face { ... }Wird im CSS angegeben. Mit geschweifter Klammer werden mindestens FONT-FAMILY: und SRC: angegeben.
font-family:Benötigt. Der Name der Schrift. Der Name ergibt sich aus dem Dateinamen. Bei GITHUB liegen die Dateien der Google Webfonts. Natürlich beachtet man vor Gebrauch die Lizenzbestimmungen.
src:Benötigt. Die Quelle (Source) der Schrift. Es gilt in der reinen Lehre die same-origin-policy. Die Schriften sollen also auf dem eigenen Server liegen und sollten mit relativen Pfaden eingebunden sein. Im gezeigten Beispiel funktioniert dies jedoch auch mit absoluten Pfaden. Die Dateitypen WOFF und WOFF2 sind zu empfehlen. Dies sind komprimierte Dateiformate für Schriften. WOFF2 ist etwas kleiner, wird aber nicht von allen Browsern unterstützt.
font-stretch:Optional. Angaben zum Schriftschnitt. Standard ist normal. Z.B. normal, condensed,
Ultra-condensed …
font-style:Optional. Angaben zum Schriftstil. Z.B. italic. Standard ist normal. Z.B. normal, italic, oblique ...
font-weight:Optional. Angaben zu der Schriftstärke. Meist wird dies in Zahlen ausgegeben. Je niedriger die Zahl, desto dünner. Normal entspricht der 400. Je nach Schrift kann über die Nummer auch eine Kursive gewählt werden. z.B. 400, 700, 100 ...
unicode-range:Optional. Man kann Teile der Schrift laden. Das macht z.B. bei chinesischen Schriften Sinn, die 1-2 Megabyte groß sind. Z.B. U+0-10FFFF.

► Weitere Infos

Externe Quellen

W3C Media Queries

https://drafts.csswg.org/mediaqueries

W3C Working Draft zu Media Queries.


Logic in Media-Queries

https://css-tricks.com/logic-in-media-queries/

Artikel in englischer Sprache zu der Logik die mit der Kombination von Media Queries erreicht werden kann.


CSS/Media Queries

https://wiki.selfhtml.(...)Media_Queries

Artikel in deutscher Sprache zu Media Queries.


A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES

https://www.zachleat.com/web/comprehensive-webfonts...

Epischer Artikel über diverse Strategien um Webfonts zu laden. Zach Leathermann listet neben @font-face weitere Möglichkeiten auf und beschreibt ausführlich die jeweiligen Vor- und Nachteile.


RWD Podcast

https://responsivewebdesign.com/podcast/

Interviews als Podcast zu responsiven Design.