Auf Ihren Wunsch behandelt dieser Artikel Medienanfragen, was bedeutet, dass Medientypen zusammen mit einem oder mehreren Ausdrücken über die Eigenschaften eines Mediums, um die Formatierung für verschiedene Geräte zu definieren. Browser oder Anwendungen lesen die im Abfrage, und wenn das betreffende Gerät diese Bedingungen erfüllt, wird das entsprechende CSS angewendet wird.
Medientypen geben an, für welche Medien ein bestimmter CSS-Block vorgesehen ist. HTML wurde entwickelt, um portabel zu sein, d. h., es kann von jedem Gerät gelesen und interpretiert werden. Allerdings rendert jedes Gerät HTML aufgrund von Faktoren wie der Bildschirmgröße anders (z. B. „Auflösung”). Beispielsweise verhält sich der Zugriff auf eine Site von einem Desktop aus nicht genauso wie der Zugriff von einem mobilen Gerät aus, da es sich um unterschiedliche Geräte mit unterschiedlichen Browsing-Kontexte.
Die Herausforderung bei Media Queries besteht heute darin, dass immer mehr Geräte mit unterschiedlichen Bildschirmgrößen und Hardware-Funktionen auf den Markt kommen, die Desktops ähneln. Dadurch surfen sie fast wie Desktop-Computer. Nehmen Sie die iPhone X Beispielsweise ist die Anzeigequalität hervorragend und der Browser rendert Seiten genau wie ein typischer Desktop-Browser.
In diesem Fall ist es nicht notwendig, ein Layout und CSS speziell für Handheld Medientypen auf dem iPhone – denn obwohl es ein Handheld ist, verhält es sich nicht wie eines. Es verhält sich aber auch nicht genau wie ein Desktop. Obwohl Safaris Rendering-Engine mit der Desktop-Version identisch ist, unterscheiden sich Benutzerverhalten und Navigationsmuster. Wir befinden uns in einem Mittelweg: Wir können weder ein komplett separates CSS für Handhelds bereitstellen, noch können wir uns ausschließlich auf einen Desktop verlassen (Bildschirm) Stylesheet.
Nachfolgend wird beschrieben, wie Sie definieren, welche Stylesheet-Regeln geladen werden sollen:
<style>
@media screen und (max-width:1024px) {
.small-resolution { Anzeige: keine; }
}
.kleine Auflösung { Anzeige: Block; }
</style>
Optional können Sie eine separate .css Datei und hosten Sie sie entweder auf Ihrem eigenen Server oder über die CDN-Lösung meines Startups, Blenner SmartCDN. Fügen Sie es dann wie folgt in den Metadatenabschnitt Ihres HTML-Codes ein:
<link rel=”stylesheet” href=”URL_OF_YOUR_CSS_FILE”>
Sobald Ihre CSS-Datei vorhanden ist, rufen Sie die Klasse einfach dort auf, wo Sie das responsive Verhalten benötigen. So wenden Sie sie beispielsweise auf ein Bild an, das mit einem benutzerdefinierten Tag namens „C“ umschlossen ist:
<c class=”small-resolution”>
<img src="”IMAGE_URL”" alt=""BESCHREIBUNG"" id="”OPTIONAL_ADDITIONAL_ID”">
</c>
Hoffe, das hilft! 😀
Hinterlassen Sie unten Ihre Kommentare und teilen Sie sie mit Ihren Freunden!
