Verwendung in HTML
------------------
Hier wird das Stylesheet smartphones.css geladen, wenn die maximale Bildschirmbreite des betrachtenden Gerätes 480 Pixel
nicht überschreitet. In dieser Ressource können Entwickler nun spezielle Anpassungen für entsprechende Geräte vornehmen.
Geräte mit einer anderen Auflösung bleiben davon unberührt.
Sie bekommen die Website also beispielsweise in voller Größe angezeigt, da sie die Festlegungen aus dem Stylesheet all.css anwenden.
Bei der Verwendung von Media Queries in HTML ist zu beachten, dass Browser grundsätzlich alle verfügbaren Stylesheets herunterladen,
auch wenn sie den angegebenen Bedingungen nicht entsprechen.
Verwendung in CSS
-----------------
Verbreitet ist die Einbettung von Media Queries direkt in das Stylesheet. So werden bestimmte Regeln vom Browser nur dann
in Betracht gezogen, wenn die definierten Bedingungen erfüllt sind.
div {
display:inline-block;
width: 33%;
}
@media(max-device-width: 480px){
div {
display:block;
width: 100%;
}
}
Erstellen Sie SVG-Icons
-----------------------
Sie sind immer gestochen scharf, skalierbar und können sogar bei größeren Viewport-Größen zusätzliche Details einblenden
Viele JavaScript-Interaktionen und CSS-Hovereffekte funktionieren auf Touchgeräten nicht
----------------------------------------------------------------------------------------
da es kein mouseover und kein :hover gibt. Zum Teil versuchen die Browser dieses Verhalten nachzuahmen,
besser ist es jedoch bereits bei der Programmierung Touch-Events zu implementieren.
Auch der Klammergriff [alt] [strg] [entf] ist auf Touchgeräten nicht möglich.
Beachten Sie: Verbinden Sie auf keinen Fall media queries für kleine Viewport-Größen mit Touch-Geräten.
Manch kleines Mobilgerät hat eine Tastatur, während es schon 30-Zoll-Touch-Screens gibt.