9 CSS-Tricks für erweiterte Medienabfragen, die Sie kennen sollten

Eine nutzbare, barrierefreie Erfahrung ist für eine erfolgreiche Website von entscheidender Bedeutung. Wenn Ihre Leser eine positive Erfahrung machen, werden sie eher einen Aufruf zum Handeln ausführen, einschließlich des Kaufs von Produkten. Es ist auch wahrscheinlicher, dass sie Ihre Website erneut besuchen oder anderen empfehlen. Erfahrung ist der Schlüssel.

Medienabfragen bieten verschiedene CSS-Funktionen, mit denen Sie Ihre Website anpassen können. Sie ermöglichen es Ihnen, die Erfahrung jedes Benutzers basierend auf den Fähigkeiten seines Geräts anzupassen. Erfahren Sie, wie Sie Ihren Lesern das beste Erlebnis bieten, egal ob sie ihr Telefon oder einen großen Desktop-Monitor verwenden.

1. Die Zeigerfunktion

Die @Medienregel verfügt über eine Zeigerfunktion, mit der Sie Ihr Design basierend auf dem primären Zeigegerät anpassen können. Sie können Verfügbarkeit und Qualität testen.

Dieser Zeiger Medienabfragefunktion nimmt einen von drei Werten an: keine, grob oder fein. Die keiner Der Wert gilt, wenn kein Zeigegerät vorhanden ist. Die

grob Wert gilt, wenn das primäre Zeigegerät eine verringerte Genauigkeit aufweist. Und das fein Wert gilt, wenn das primäre Zeigegerät eine hohe Genauigkeit aufweist.

Verwenden der Zeigerfunktion

Optionen zur Auswahl: 
 Option eins
 Option zwei

Der obige Code generiert zwei Radioeingabeoptionen, die je nach Genauigkeit des primären Zeigegeräts eines Computers variieren.

Ein Computer mit einem genauen (oder qualitativ hochwertigen) primären Zeigegerät zeigt die folgende Webseite an:

Ein Computer mit einem primären Gerät mit begrenzter Genauigkeit (oder niedriger Qualität) zeigt die folgende Webseite an:

Das Gerät mit einem primären Zeigegerät mit begrenzter Genauigkeit verfügt über größere Optionsfelder. Dies bietet solchen Benutzern eine bessere Benutzererfahrung. Mit der Pointer-Funktion können Sie sicherstellen, dass alle Ihre Benutzer unabhängig von ihrem Gerät ein angenehmes Erlebnis haben.

2. Die Any-Pointer-Funktion

Wie die Pointer-Funktion zielt auch die Any-Pointer Media Query-Funktion auf Zeigegeräte ab. Die Any-Pointer-Funktion wertet jedoch jedes Zeigegerät eines Computers aus. Die Any-Pointer-Funktion verwendet auch die keiner, grob, und fein Werte.

Verwenden der Any-Pointer-Funktion

 @media (beliebiger Zeiger: gut) {
 input[type="radio"] {
 Breite: 15px;
 Höhe: 15px;
 Randradius: 20px;
 Rahmenbreite: 1px;
 }
 }
@media (beliebiger Zeiger: grob) {
 input[type="radio"] {
 Breite: 25px;
 Höhe: 25px;
 Randradius: 20px;
 Rahmenbreite: 2px;
 }
 }

Sie können den obigen Code einfach durch den Medienabfrageabschnitt des Codes im Beispiel für die Zeigerfunktion ersetzen. Der obige Code rendert eine angemessene Anzeige basierend auf der Qualität eines beliebigen Zeigegeräts, das ein Computer haben könnte.

3. Die Hover-Funktion

Die Hover-Medienabfragefunktion wertet aus, ob der primäre Eingabemechanismus eines Geräts in der Lage ist, den Mauszeiger über die Elemente in einer Benutzeroberfläche zu bewegen.

Verwenden der Hover-Funktion

 /* CSS */
 ein{
 Textdekoration: keine;
 Farbe: Schwarz;
 }
 @media (schweben: schweben) {
 a: schweben {
 Farbe blau;
 }
 }
 HTML 
 Ein Link-Element

Der obige Code zeigt eine an Element. Es ändert seine Farbe (von Schwarz zu Blau), wenn der primäre Eingabemechanismus eines Geräts (das Schweben unterstützt) darüber schwebt.

4. Die Any-Hover-Funktion

Die Beliebig schweben Die Medienabfrage zielt auf jeden Eingabemechanismus ab, einschließlich des primären Eingabemechanismus.

Verwenden der Any-Hover-Funktion

@media (any-hover: schweben) {
 a: schweben {
 Farbe blau;
 }
 }

Die obige Medienabfrage erzeugt einen Hover-Effekt für jeden Eingabemechanismus, der über ein Element schweben kann.

5. Die Auflösungsfunktion

Die Auflösungsmedienabfragefunktion berechnet die Anzahl der Pixel, die von einem bestimmten Gerät angezeigt werden. Ein Gerät, das mehr Pixel pro Zoll anzeigt, hat eine bessere Auflösung, da es Bilder mit mehr Details anzeigt. Diese Funktion kann einem Entwickler helfen zu entscheiden, welche Gerätebenutzer Elemente in einer Benutzeroberfläche deutlicher sehen könnten.

Die Auflösungsfunktion verwendet den Bereich. Dies bedeutet, dass neben der Verwendung der Auflösung Stichwort, können Sie verwenden min-Auflösung und maximale Auflösung. Die Funktion zur Auflösung von Medienabfragen gehört zum Datentyp Auflösung. Das bedeutet, dass das Auflösungsmerkmal in einer von drei Einheiten messbar ist: Punkte pro Zoll (dpi), Punkte pro Zentimeter (dpcm) oder Punkte pro Pixel (dppx).

Verwenden der Auflösungsfunktion

/* CSS */
@media (Mindestauflösung: 72dpi) {
 P {
 Farbe weiß;
 Hintergrundfarbe: blau;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Die niedrigste Auflösung, die ein Gerät haben und dennoch qualitativ hochwertige Bilder anzeigen kann, ist 72 dpi. Wenn ein Gerät also eine Auflösung von 72 dpi oder mehr hat, zeigt es die folgende Ausgabe in seinem Browser an:

6. Die Orientierungsfunktion

Ein Geräteansichtsfenster kann nur eine von zwei Ausrichtungen haben: Porträt oder Landschaft. Beachten Sie, dass sich die Ausrichtung eines Ansichtsfensters von einer Geräteausrichtung unterscheidet. Wenn ein Gerät eine Soft-Tastatur verwendet, kann sich sein Ansichtsfenster vom Hochformat ins Querformat ändern, während sich das Gerät selbst noch in der Hochformatposition befindet.

Verwenden der Orientierungsfunktion

/* CSS */
 Karosserie{
 Anzeige: Flex;
 }
 Sektion{
 Rand: 2px durchgehend blau;
 Polsterung: 3px;
 Rand: 3px;
 }
 @media (Ausrichtung: Querformat) {
 Karosserie {
 Biegerichtung: Reihe;
 }
 }
@media (Ausrichtung: Hochformat) {
 Karosserie {
 Biegerichtung: Säule;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Der obige Code ändert das Layout einer Webseite basierend auf der Ausrichtung eines Geräts.

Ein Gerät mit einem Ansichtsfenster im Querformat zeigt die folgende Webseite an:

Ein Gerät mit einem Ansichtsfenster im Hochformat zeigt die folgende Webseite an:

7. Die Höhenfunktion

Mit der Höhenmedienabfragefunktion können Sie das CSS-Styling basierend auf der Höhe des Darstellungsbereichs des Geräts eines Benutzers angeben. Diese Funktion unterstützt die Reichweite, sodass Sie auch die verwenden können Mindesthöhe und maximale Höhe Schlüsselwörter.

Verwenden der Höhenfunktion

 /* CSS */
 @media (Mindesthöhe: 360 Pixel) {
 P{
 Rand: 2px orangerot gepunktet;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Der obige Code passt an, was ein Benutzer basierend auf der Höhe seines Geräts sieht. Benutzer mit einer Gerätehöhe von 360 Pixel und mehr sehen etwas Ähnliches wie die folgende Webseite:

Geräte mit einer Höhe von weniger als 360 Pixeln zeigen den Rahmen um den Absatz auf der Webseite nicht an.

8. Das Breiten-Feature

Mit der Medienabfragefunktion für die Breite können Sie basierend auf der Breite des Darstellungsbereichs des Geräts eines Benutzers ein spezifisches CSS-Design erstellen. Diese Funktion unterstützt auch die Reichweite, sodass Sie die Möglichkeit haben, die zu verwenden Mindestbreite und maximale Breite Schlüsselwörter.

Verwenden der Breitenfunktion

 /* CSS */
 @media (Mindestbreite: 600px) {
 P{
 Rand: 2 Pixel durchgehend lila;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Der obige Code passt an, was ein Benutzer basierend auf der Breite seines Geräts sieht. Benutzer mit einer Gerätebreite von 600 Pixel und mehr sehen so etwas wie die folgende Webseite:

Die Verwendung von breiten- und höhenbasierten Medienabfragen kann eine effektive Strategie sein Ihre Website responsiv machen.

9. Die Farbfunktion

Die Farbmedienabfragefunktion wertet die Farbkomponente eines Geräts (rot, grün, blau) aus. Der Wert bezieht sich darauf, wie viele Bits ein Display für jede Komponente verwendet, was definiert, wie viele verschiedene Farben es anzeigen kann. Moderne Geräte verwenden normalerweise eine 24-Bit-Anzeige, die acht Bit pro Farbkomponente verwendet. Es nimmt auch einen ganzzahligen Wert an, wobei ein farbloses Gerät Null ist.

Die Farbfunktion verwendet auch die Min-Farbe und max-farbe Bereiche.

Verwenden der Farbfunktion

 /* CSS */
 @media (Mindestfarbe: 7) {
 P{
 Rand: 2px durchgehend grün;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Geräte mit einer Farbkomponente von sieben und mehr zeigen die folgende Ausgabe in ihren Browsern an:

Jetzt können Sie einzigartige Benutzererlebnisse schaffen

Sie sollten in der Lage sein, diese erweiterten Medienabfragen zu verwenden, um die Erfahrung jedes Benutzers zu verbessern, der Ihre Website oder Anwendung besucht. Es ist wichtig, mobilen Benutzern und Desktop-Benutzern eine gleichermaßen positive Erfahrung auf Ihrer Website zu bieten.

Medienabfragen sind nicht die einzigen CSS-Tools, die Ihre Entwicklerfähigkeiten stärken können.

8 grundlegende CSS-Tipps und Tricks, die jeder Entwickler kennen sollte

Lesen Sie weiter

Über den Autor