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) *//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.