ATOZ CSS: Erstellen eines reaktionsschnellen Designs mit Medienfragen

Schlüsselpunkte

• Vermeiden Sie die Verwendung von Gerätespezifischen Haltepunkten beim Erstellen von reaktionsschnellen Designs. Stellen Sie stattdessen die primären Haltepunkte und sekundären Feinabstimmungspunkte ein, die ungefähr so ​​groß sind wie die meisten Telefone, Tablets und Desktop/Laptop-Geräte.
• Verwenden Sie EM oder REM als Breakpoint -Einheiten anstelle von Pixeln für eine bessere Skalierbarkeit. Dies hilft, wenn der Benutzer die Seite skaliert oder die Textgröße erhöht.
• CSS -Medienabfragen sind ein leistungsstarkes Tool zum Erstellen reaktionsschneller Designs. Sie ermöglichen es Ihnen, verschiedene Stile auf verschiedene Geräte mit unterschiedlichen Bildschirmgrößen anzuwenden. Vermeiden Sie es jedoch, sie zu verwenden, um bestimmte Geräte zu lokalisieren, da dies zu einem Alptraum der Wartung führen kann. Konzentrieren Sie sich stattdessen darauf, reaktionsschnelle Designs zu erstellen, die für alle Bildschirmgrößen funktionieren.

Dieser Artikel ist Teil der ATOZ CSS -Serie. Die vollständigen Screenshots und Transkripte von Medienfragen finden Sie hier.

Willkommen in unserer Atoz CSS -Serie! In dieser Serie werde ich verschiedene CSS -Werte (und Eigenschaften) untersuchen, die jeweils mit unterschiedlichen Buchstaben des Alphabets beginnen. Wir wissen, dass manchmal Screenshots nicht genug sind. In diesem Artikel habe ich einen neuen Schnelltipp/Kurs über Medienanfragen hinzugefügt.

m repräsentative Medienabfrage

Ich denke, die überwiegende Mehrheit der Webdesigner und Entwickler ist nun mit dem Konzept des reaktionsschnellen Designs vertraut. Wenn nicht, überprüfen Sie den Screenshot für Medienabfragen.

Da reaktionsschnelles Design sehr beliebt ist, ist es ein großartiger Ort, um einige Tipps zu lernen, die die Art und Weise verbessern können, wie wir Websites und Anwendungen für eine Vielzahl von Geräten entwickeln. Hier sind einige CSS -Tipps, die Ihnen helfen.

Tipp 1: Verwenden Sie keine Haltepunkte für bestimmte Geräte

Ich hoffe, dies ist selbstverständlich, aber nur für den Fall, dass Sie eine Erinnerung benötigen oder noch nicht so bewährte Praktiken auftreten, denke ich, dass es sich lohnt, wiederholt zu werden.

Breakpoints für bestimmte Geräte können in Ihrem Code leicht über Medienabfragen identifiziert werden, wie unten gezeigt (Kommentare für erhöhte Klarheit hinzufügen):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

Diese Haltepunkte sind für Apple -Geräte eingestellt und haben "Magic Number" -Werte wie 768px oder 1024px.

Was ist, wenn das Fenster des Benutzers 1025px oder 1023px ist?

Die Medienabfrage wird nicht wirksam und der Stil der Gerätegröße wird nicht angewendet.

Manchmal benötigen Sie möglicherweise sehr spezifische Werte für Breakpoints (dazu später mehr), aber es scheint mir, dass es ein Codegeruch ist, Breakpoints für diese spezifischen Geräte zu sehen.

Was solltest du tun?

Technik 2: Setzen Sie den Haupt-Breakpoint und den sekundären Feinabstimmungspunkt Wenn ich an reaktionsschnellen Projekten arbeite, neige ich dazu, willkürliche Ganzzahl -Haltepunkte zu setzen, die ungefähr die Größe der meisten Telefone, Tablets und Desktop/Laptop -Geräte haben.

Ich neige dazu, die folgenden Hauptbestandteile zu verwenden (obwohl sich dies manchmal je nach Projekt ändern kann):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

Die Verwendung dieser Haltepunkte beschränkt das Design nicht nur an diesen Punkten, sondern bietet eine gute Grundlage für die Verwendung von drei Hauptgerätetypen.

Für inhaltsbasierte Design-Tweaks (d. H. Wenn der Inhalt beschädigt, unausgeglichen oder nicht gut passt) können Sie Feinabstimmungspunkte verwenden, um Elemente anzupassen und die Details des Projekts zu polieren.

<code>/* 大手机和小平板 */
@media screen and (min-width: 500px;) {}

/* 平板电脑和小显示器 */
@media screen and (min-width: 800px;) {}

/* 笔记本电脑和台式机 */
@media screen and (min-width: 1200px;) {}</code>

Tipp 3: Verwenden Sie EM oder REM als Haltepunkteinheit

Verwenden Sie PX nicht, sondern verwenden Sie eine dieser relativen Einheiten, sodass Sie eine bessere Skalierbarkeit erzielen können, wenn der Benutzer die Seite skaliert oder die Textgröße erhöht. Wenn ich beispielsweise die Größe der EM -Einheiten angreift, lautet der obige Hauptbrandbezeichnung wie folgt.

<code>/* 调整共享按钮的位置 */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}</code>

FAQs über CSS -Medienabfragen und Haltepunkte (FAQ)

Was sind die Best Practices für das Festlegen von CSS -Haltepunkten?

CSS -Haltepunkte sind für die Erstellung reaktionsschneller Designs unerlässlich. Sie ermöglichen es den Layouts, an vordefinierten Punkten zu ändern, d. H. Layouts für verschiedene Bildschirmgrößen bereitzustellen. Zu den Best Practices für das Festlegen von CSS -Haltepunkten gehören zuerst mit einem beweglichen Layout und dann Schritt für Schritt nach oben. Es wird auch empfohlen, EM- oder REM -Einheiten anstelle von Pixeln als Haltepunkte zu verwenden, da sie flexibler und leichter zugänglich sind. Vermeiden Sie es schließlich, zu viele Haltepunkte zu verwenden. Halten Sie sich an Standardgrößen für mobile Geräte, Tablets und Desktops.

Wie verwendet ich CSS -Medienabfragen für reaktionsschnelles Design?

CSS -Medienabfragen sind ein leistungsstarkes Tool zum Erstellen reaktionsschneller Designs. Sie ermöglichen es Ihnen, verschiedene Stile auf verschiedene Geräte mit unterschiedlichen Bildschirmgrößen anzuwenden. Sie können sie in CSS verwenden, indem Sie @media Regeln, Medienfunktionenbedingungen wie max-width oder min-width und die CSS -Stile, die Sie bewerben möchten, verwenden können.

Was sind die Standard -CSS -Haltepunkte für reaktionsschnelles Design?

Die Standard -CSS -Haltepunkte für das reaktionsschnelle Design sind normalerweise wie folgt: 320px für mobile Geräte, 768px für Tablets, 1024px für Tablets und 1200px für große Desktops. Dies sind jedoch keine starre Vorschriften und können entsprechend den spezifischen Bedürfnissen des Designs angepasst werden.

Wie testet ich meinen CSS -Haltepunkt?

Sie können das Kontrollwerkzeug in Ihrem Browser verwenden, um Ihre CSS -Haltepunkte zu testen. Mit diesem Tool können Sie verschiedene Bildschirmgrößen simulieren und sehen, wie Ihr Layout reagiert. Darüber hinaus können Sie Online -Tools wie BrowsStack oder Responsive Design -Testwebsites verwenden, um auf verschiedenen Geräten und Bildschirmauflösungen zu testen.

Kann ich CSS -Medienabfragen verwenden, um bestimmte Geräte zu lokalisieren?

Ja, Sie können CSS -Medienabfragen verwenden, um bestimmte Geräte zu lokalisieren. Dies wird jedoch normalerweise nicht empfohlen, da dies zu einem Alptraum der Wartung führen kann. Konzentrieren Sie sich stattdessen darauf, reaktionsschnelle Designs zu erstellen, die für alle Bildschirmgrößen funktionieren.

Wie ändere ich die Schriftgröße mithilfe der CSS -Medienabfrage?

Mit CSS Media Query können Sie die Schriftgröße basierend auf der Bildschirmgröße ändern. Sie möchten beispielsweise eine Schriftgröße zu einem größeren Bildschirm hinzufügen, um eine größere Lesbarkeit zu erhalten. Sie können dies tun, indem Sie eine Medienabfrage mit der gewünschten Bildschirmgröße definieren und dann eine neue Schriftgröße festlegen.

Was ist der Unterschied zwischen min-width und max-width in der CSS -Medienabfrage?

und min-width in max-width In CSS -Medienabfragen beziehen sich die minimalen und maximalen Ansichtsfenstergrößen, die der Stil in den Medienabfragen zutreffend ist. min-width wird verwendet, um Stile auf jede Ansichtsfenstergröße anzuwenden, die größer als der angegebene Wert ist, während max-width verwendet wird, um Stile auf jede Ansichtsfenstergröße zu wenden, die weniger als oder gleich dem angegebenen Wert ist.

Kann ich CSS -Medienabfragen mit JavaScript verwenden?

Ja, Sie können die window.matchMedia() -Methode verwenden, um CSS -Medienabfragen mit JavaScript zu verwenden. Diese Methode gibt ein MediaQueryList -Objekt zurück, das das Ergebnis einer angegebenen CSS -Medienabfrage -Zeichenfolge darstellt, mit der dann verschiedene JavaScript -Funktionen basierend auf der Bildschirmgröße angewendet werden können.

Wie verwendet ich CSS Media-Abfrage, um hochauflösende Bildschirme zu verarbeiten?

Sie können die Funktion "Auflösungsmedien" verwenden, um hochauflösende Bildschirme mithilfe von CSS-Medienabfragen zu verarbeiten. Mit dieser Funktion können Sie Stile basierend auf der Pixeldichte des Bildschirms anwenden. Zum Beispiel möchten Sie möglicherweise Bilder mit höherer Auflösung für Bildschirme mit hoher Dichte bereitstellen, um sicherzustellen, dass sie scharf und scharf aussehen.

Kann ich CSS -Medienabfrage verwenden, um den Dunklen Modus zu erkennen?

Ja, Sie können CSS -Medienabfragen verwenden, um festzustellen, ob der Benutzer sein System auf den Dunklen Modus gesetzt hat. Sie können die prefers-color-scheme Medienfunktion verwenden, um dies zu erreichen. Mit dieser Funktion können Sie verschiedene Stile entsprechend dem bevorzugten Farbschema des Benutzers (d. H. Hell oder dunkle Farben) anwenden.

Das obige ist der detaillierte Inhalt vonATOZ CSS: Erstellen eines reaktionsschnellen Designs mit Medienfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!