laden css über Javascript nach Bildschirmauflösung

Statement: Making meine Website Responsive.laden css über Javascript nach Bildschirmauflösung

Was ich bisher gemacht habe: Ich habe versucht, @media Abfragen zu verwenden, externe CSS-Seiten entsprechend der Auflösung.

Problem: Ich habe 5 Stylesheets gemacht; 1024.css, 1280.css, 1366.css, 1440.css, 1920.css. Alle scheinen gut zu funktionieren, außer der 1024.css! Wenn ich die Website mit einer Auflösung von 1024 lade, wird automatisch die mobile Website angezeigt. Das Navigationsgerät verwandelt sich in einen Knopf, alle Elemente werden disloziert.

Was ich suche ?: Ich möchte die Css Style Sheets über Javascript laden. Für z.B. Ich möchte 1280.css laden können, wenn die Bildschirmauflösung 1024px ist.

Ich bin ein Anfänger bei js. Also kann ich keine erweiterten Funktionen machen.

Aber bisher habe ich diesen Algorithmus vorbereitet:

If (max-width = 1024px){replace style.css with 1280.css} 

If (max-width = 1366px){replace style.css with 1366.css} 

If (max-width = 1440px){replace style.css with 1440.css} 

If (max-width = 1920px){replace style.css with 1920.css} 

Else if (max-width = 1280px){replace style.css with 1280.css}

PS: Ich habe gesucht Google und Stackoverflow und nichts gefunden.

UPDATE: Ich habe versucht, was Sie Abhishek Pandey gesagt haben, aber hier ist das Ergebnis. Sie können es auf http://shalepizza.tk/ überprüfen, ich arbeite derzeit auf der Indexseite.

die entsprechende Auflösung zu überprüfen, wenn die Seite geladen wird, drücken Sie F12 und Strg + Shift + M

verbinde ich meine CSS wie folgt aus: <link href="/static/1024.css" rel="stylesheet" type="text/css" />

Quelle

2016-09-05 Abbas Akhtar

Ihr aktueller Ansatz ist die richtige. Sie sollten besser herausfinden, warum es nicht wie erwartet funktioniert. – Archer

warum js verwenden - warum nicht Medienabfragen verwenden? Es ist unklar, was schiefgelaufen ist, wenn Sie sagen, dass Sie das versucht haben – Pete

Versuchen Sie diese https://css-tricks.com/resolution-specific-stylesheets/ – user2584538

Sie html statt js

verwenden können

<link href="/static/1024.css" media="screen and (max-width:1024px)" rel="stylesheet" type="text/css" /> 
<link href="/static/1366.css" media="screen and (max-width:1366px)" rel="stylesheet" type="text/css" />

oder beste Option ist @media Abfragen in CSS-Datei

/* min size style*/ 
@media screen and (max-width:320px) { 
    /* put your css style in there */ 
} 

/* middle size style */ 
@media screen and (min-width:321px) { 
    /* put your css style in there */ 
} 

/* large size style */ 
@media screen and (min-width:800px) { 
    /* put your css style in there */ 
}

zu verwenden

Quelle

2016-09-05 10:38:44

Darf ich Sie fragen, warum Sie Javascript für das verwenden möchten? HTML Hat etwas namens Media Queries (Regel: @media), und mit diesem können Sie angeben, welches CSS es benötigt, um eine bestimmte Größe auszuführen.

Eine Medienabfrage beginnt mit @media. Verwenden Sie screen, um den Code mitzuteilen, der sich auf den Bildschirmanschluss bezieht. Schließe mit and (min-width:1024px){ ab und gib dein CSS dort ein.

Zum Beispiel. Dies ist Ihre style.css;

@media screen and (min-width:1024px){ 
    background-color:#0f0f1f; 
} 

@media screen and (min-width:2411px){ 
    background-color:000000; 
}

Fügen Sie keine anderen CSS-Dateien wie diese ein. Wenn Sie das tun möchten, können Sie das Media-Attribut in Ihrem CSS-Include angeben.

media="screen and (min-width:1024px)"

Quelle

2016-09-05 11:08:57

<body onresize="myFunction()"> 
function myFunction() { 
      var width = window.outerWidth; 
      if (width < 960){ 
       $('link[href="style1.css"]').attr('href','style2.css'); 
      }else{ 
       $('link[href="style2.css"]').attr('href','style1.css'); 
      } 
     }

Quelle

2016-09-05 11:39:02

laden css über Javascript nach Bildschirmauflösung

Antwort

Verwandte Themen