JavaScript verwendet Medienabfragen in CSS, um zu bestimmen, wie man Geräte durchsuchen

CSS -Abschnitt

Erstellen Sie zunächst eine neue Klasse für das Urteilsvermögen und verwenden Sie dann Medienabfragen, um dem Z-Index-Attribut dieser Klasse unterschiedliche Werte zuzuweisen. Diese Klasse wird nur als JavaScript -Lesen verwendet, sodass sie aus dem Bildschirmfenster verschoben werden muss, damit der Betrachter unsichtbar ist, um unerwartete Situationen zu vermeiden.

Als Demonstration legt der folgende Code vier Gerätestatus fest: Desktop -Normalversion, kleine Bildschirm -Desktop -Version, Tablet -Version und mobile Version.

 / * Standardzustand */. State-Indicator {Position: absolut; Top: -999em; links: -999em; Z-Index: 1;}/ * Small Desktop */@Media All und (max-Width: 1200px) {.State-Indicator {Z-Index: 2; }}/ * tablet */@media all und (max-Width: 1024px) {.state-Indicator {z-Index: 3; }}/ * Mobiltelefon */@media all und (max-Width: 768px) {.state-Indicator {Z-Index: 4; }}

JavaScript -Urteil

CSS ist bereits vorhanden, daher müssen Sie JavaScript verwenden, um ein temporäres DOM-Objekt zu generieren, dann die entsprechende Klasse dafür festlegen und dann den Z-Index-Wert dieses Objekts lesen. Die native Schreibmethode lautet wie folgt:

 // Erstellen Sie den State-Indicator-Elementvar-Indikator = document.createelement ('div'); Indicator.className = 'State-Indicator'; document.body.AppendChild (Indikator); // Erstellen Sie eine Methode, die Geräte-störungen getDevicestate () {return parseint (WindowsChode.GetCorputedStyle). 10);} getDevicestate () Die Funktion gibt den Wert von Z-Index zurück. Um die Lesbarkeit zu verbessern, können Sie Switch-Funktionen verwenden, um die Ausgabe zu standardisieren: Funktion getDeVicestate () {Switch (ParseInt (window.getComputedStyle) .GetPropertyValue ('Z-Index'), 10)) {Fall 2: Rückgabe 'Small-Desktop'; brechen; Fall 3: Return 'Tablet'; brechen; Fall 4: Return 'Telefon'; brechen; Standard: Retop 'Desktop'; brechen; }}

Auf diese Weise können Sie den folgenden Code verwenden, um den Gerätestatus zu bestimmen und dann den entsprechenden JavaScript -Code auszuführen:

 if (getDevicestate () == 'Tablet') {// JavaScript -Code, der unter dem Tablet} ausgeführt wurde

Wenn Sie JQuery hier verwenden, verwenden Sie einfach den folgenden Code:

 $ (function () {$ ('body'). append ('<div> </div>'); Funktion getDeVicestate () {switch (parseInt ($ ('. State-Indicator'). 'Desktop';

Erstellen Sie zuerst, erhalten Sie dann und löschen Sie diesen Knoten schließlich. Das spezifische Gerät wird in Ihrer Konsole ausgegeben. Klicken Sie hier, um die Demo anzuzeigen. Sie können versuchen, den mittleren Rand zu ziehen und auf Ausführen zu klicken.