So verwenden Sie CSS3-Medienabfragen

Die Medienabfrage-Funktion von CSS3 ermöglicht die Realisierung eines responsiven Layouts. Tatsächlich besteht das Grundprinzip darin, die CSS3-Medienabfragefunktion (Medien/Meta) zu verwenden, um die Größe herauszufinden des Geräts und schreiben Sie dann CSS-Stile schreiben oder überschreiben in verschiedenen Größen, um das Erscheinungsbild der Benutzeroberfläche zu ändern. Als Nächstes erkläre ich Ihnen, wie Sie CSS3-Medienabfragen verwenden.

responsives Webdesign

Integration vorhandener Entwicklungskompetenzen (flexibles Rasterlayout, flexible Bilder, Medien und Medienabfragen)

Integriertes und benanntes responsives Webdesign

ist ein Anzeigemechanismus für das „perfekte“ Layout von Webinhalten für jedes Gerät.

Kurz gesagt: Eine Website kann mit mehreren Terminals kompatibel sein – anstatt für jedes Terminal eine spezifische Version zu erstellen.

Vorteile

Das Multi-Terminal-Visualisierungs- und Bedienerlebnis ist sehr konsistent

Kompatibel mit aktuellen und zukünftigen neuen Geräten

Die meisten Technologien im responsiven Webdesign können Wird in der WebApp-Entwicklung verwendet

Es spart Entwicklungskosten und auch die Wartungskosten werden erheblich reduziert

Unzureichend

Kompatibilität: Es gibt Probleme mit der Kompatibilität von Browsern niedrigerer Versionen

Mobiler Bandbreitenverkehr: Im Vergleich zu für Mobiltelefone angepassten Websites ist der Verkehr etwas größer,

aber im Vergleich zum Laden einer kompletten PC-Website ist er offensichtlich viel kleiner

Der Code ist umständlich, und versteckte nutzlose Elemente werden angezeigt. Längere Ladezeit

Kompatibel mit verschiedenen Geräten und hoher Arbeitsbelastung

Mobile first

In den frühen Phasen des Designs müssen wir darüber nachdenken, wie die Seite aussehen soll wird auf mehreren Terminals angezeigt

Progressive Verbesserung

Machen Sie das Beste aus Ihrem Hardwaregerät

Wofür ist es geeignet?

Für inhaltsintensive Websites, wie z. B. die Bildanzeige, ist es besser, responsives Webdesign zu verwenden

Was trifft nicht zu?

Für Websites mit umfangreichen Funktionen wie E-Commerce wird eher die Verwendung unabhängiger mobiler Websites empfohlen

CSS3-Medienabfrage (Medienabfrage)

Javascript

Open-Source-Framework von Drittanbietern

 Bootstrap

GemeinsameAttributoperationen

Gerätebreite/ Gerätehöhe Gerätebildschirmbreite und -höhe

Breite/Höhe (Breite des Rendering-Fensters) Tatsächliche Anzeigebreite

Auflösung Geräteauflösung

Ausrichtung Geräteausrichtung

Hochformat/Querformat, vertikaler Bildschirm oder horizontaler Bildschirm

Initial-SCALE-Einstellungsseite, anfängliches Zoomverhältnis (0-10,0)

User-SCALABLE legt fest, ob der Benutzer zoomen kann (ja/nein)

minimum-scale Stellen Sie das minimale Verkleinerungsverhältnis ein (0-10,0)

maximum-scale Stellen Sie das maximale Vergrößerungsverhältnis ein (0-10,0)

Das ist alles, was Sie wissen müssen Informationen zu Medienanfragen. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie den CSS3-Textschatten-Schriftschatten

So wählen Sie das geeignete HTML-Tag aus

Worauf sollten Sie achten, wenn Sie ein Div in HTML zentrieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!