Haltepunkte in CSS -Medienfragen | Erklärt

CSS -Medienabfragen werden als Abfragen bezeichnet, mit denen Sie das Erscheinungsbild der Webstruktur abhängig von der Art des Geräts ändern können, die die Website wie Desktops, Telefone, Laptops usw. Diese Abfragen werden unter Verwendung der @media -Regel angegeben und sollten an bestimmten Stellen definiert werden, an denen die Änderung im Weblayout erforderlich ist. Diese Punkte werden als Haltepunkte bezeichnet, die wir unten ausführlich besprochen haben.

Einführung in CSS -Haltepunkte

Haltepunkte in CSS werden als Punkte bezeichnet, auf denen das Layout einer Website der Bildschirmgröße des Gerätetyps entspricht. Diese Punkte gelten auch als Haltepunkte für Medienabfragen, da diese in Medienabfragen angegeben sind.

Nachdem wir gelernt haben, welche Haltepunkte von Medienanfragen sind, lassen Sie uns untersuchen, wie sie festgelegt werden sollen.

Einstellen von CSS -Haltepunkten

Es gibt keinen Standard, der einen Haltepunkt festlegt. Daher können die in verschiedenen Webstrukturen definierten Haltepunkte unterscheiden. Wir wurden jedoch zwei Arten von Ansätzen zur Verfügung gestellt, um einen Haltepunkt festzulegen.

1. Gerätetyp-Haltepunkte

2. Haltepunkte vom Typ Inhalt

Lassen Sie uns sie im Detail sehen.

Gerätetyp-Haltepunkte

Wie der Name schon sagt, berücksichtigen die Haltepunkte vom Gerätetyp auf das Verfahren zur Angabe von Haltepunkten basierend auf verschiedenen Gerätetypen. Dies jedoch möglicherweise nicht als guter Ansatz angesehen wird, da sich die Technologie von der Minute weiterentwickelt und ab und zu neue Geräte entstehen. Jedes Mal, wenn ein neues Gerät auftaucht, müssen die Entwickler einen Haltepunkt für das bestimmte Gerät angeben, das hektisch sein kann.

Darüber hinaus ist die Liste der Medienabfragen bei der Definition von Haltepunkten nach Gerätetyp enorm. Verschiedene Geräte auf der Grundlage, deren Grundlage Sie die Haltepunkte entscheiden können, sind wie folgt.

1. Desktops

2. Tablets

3. Mobiltelefone

Hier haben wir einige Beispiele für Gerätebasierte Haltepunkte vorgelegt.

Für iPhone 13

@media nur Bildschirm und (Gerätebreite: 1170px) und (Gerätehausschnitt: 2532px)

…

Für Samsung Galaxy S9+

@media nur Bildschirm und (Gerätebreite: 1440px) und (Gerätehausschnitt: 2960px)

…

Anstatt die Haltepunkte jedes Geräts separat anzugeben, können Sie auch Haltepunkte für gemeinsame Gerätegruppen definieren.

/ * Für sehr kleine Geräte (486px und darunter) *//
@media nur Bildschirm und (max-Width: 486px) …
/ * Für kleine Geräte (596px und Up) */
@media nur Bildschirm und (min-width: 596px) …
/ * Für mittlere Geräte (720px und auf) */
@media nur Bildschirm und (min-width: 720px) …
/ * Für große Geräte (995px und auf) */
@media nur Bildschirm und (min-width: 995px) …
/ * Für extra große Geräte (1100px und auf) *//
@media nur Bildschirm und (Min-Width: 1100px) …

Haltepunkte vom Typ Inhalt

Angeben von Haltepunkten Basierend auf dem Typ der Inhalte, den Ihre Website anzeigt, werden die Haltepunkte des Inhaltstyps verwendet. Dies wird als ein guter Ansatz angesehen, da dieser Ansatz erforderlich ist. Mit diesem Ansatz wird die Anzahl der Medienabfragen immer überschaubarer.

Einige Haltepunkte des Beispielinhaltstyps finden Sie unten.

Für Bildschirmbreite 720px und breiter.

@media nur Bildschirm und (Minwidth: 720px)

…

Für die Bildschirmauflösung zwischen 480px und 720px.

@media nur Bildschirm und (Minwidth: 480px) und (max. Width: 720px)

…

Verwenden von Min- und Max-Breiten-Haltepunkten an den rechten Stellen

In den obigen Beispielen müssen Sie bemerkt haben, dass wir zwei Arten von Haltepunkten verwendet haben, die Min-Width und Max-Breite sind. In Ihrem Kopf muss eine Frage gestellt werden, die man verwenden soll, wenn.

Die Antwort auf diese Frage ist einfach: Wenn Sie zuerst Ihre Website für kleinere Geräte entwickeln, stellen Sie Ihre Standard-CSS-Haltepunkte mit Min-Breite ein und passen Sie sie angemessen anhand von größeren Geräten an. In der Zwischenzeit ist das Gegenteil bei größeren Geräten der Fall. Wenn Sie sich zuerst für größere Geräte entwickeln, verwenden.

Arten von Haltepunkten verwendet

Wenn der Markttyp -Markt nicht so groß war wie jetzt, wurde die Bildschirmbreite für jedes Gerät separat angegeben. Dieser Ansatz wird jedoch jetzt nicht empfohlen, da eine Vielzahl von Gerätetypen auf dem Markt vorhanden ist.

Der bevorzugte Ansatz ist, dass Sie sich der Art Ihres Webdesigns, Ihrer Zielgruppe und der Art der Geräte, die Ihr Publikum hauptsächlich verwendet, und die Bildschirmbreite dieser Geräte bewusst sein sollten. Hier haben wir einige häufig verwendete Haltepunkte eingetragen.

1. Für mobile Geräte: 320px bis 480px

2. Für Tablets und iPads: 481px bis 768px

3. Für Laptops: 769px bis 1024px

4. Für Desktops: 1025px bis 1200px

Abschluss

Haltepunkte in CSS werden als Punkte bezeichnet, auf denen das Layout einer Website der Bildschirmgröße des Gerätetyps entspricht. Es gibt zwei Arten von Haltepunkten, die auf der Grundlage des Gerätetyps angegeben sind, und die andere sind auf der Grundlage des Inhaltstyps definiert. Der Ansatz mit dem Inhaltstyp wird gegenüber dem Gerätetyp bevorzugt, da auf dem Markt eine Vielzahl von Geräten verfügbar ist und es schwierig ist, den Haltepunkt für jedes Gerät einzeln anzugeben. Obwohl für verschiedene Geräte, die wir in diesem Artikel ausführlich besprochen haben.