@media global und nicht separat für jede Bildschirmbreite anwenden

Ich habe das 1920px Stylesheet komplett mit einer Seitenbreite von 1560px. Ich versuche, die nächste Breite für 1366px-Bildschirme mit @media Abfragen zu gestalten, aber wenn ich etwas ändere, ändert sich das global.

Ich bin ein Neuling bei CSS und HTML und brauche wirklich Hilfe bei der Verknüpfung zu separaten Stylesheets (1920px, 1366, 768, 360), die ich bearbeiten kann, ohne dass die eine die andere beeinflusst. Ich habe diesen Code erfolglos versucht:

  var reswidth = screen.width; if (reswidth < 1560) {document.write('');} else {document.write('');} 

Ich möchte diesen Code gerne in einer @ media-Abfrage implementieren:

 -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); 

Ich habe stundenlang versucht, es zu versuchen, aber ich konnte es nicht herausfinden. Ich habe die Website in Dropbox hochgeladen. Wenn jemand helfen kann, wäre ich wirklich dankbar.

Ich kann auch nicht herausfinden, wie man das obere Recht und das Hauptmenü auf das Suchfeld ausgerichtet hält, wenn ich das Browserfenster horizontal verändere. Wenn jemand Zeit hat, dann bitte helfen Sie, ich fange an, es zu verlieren 🙂

Solutions Collecting From Web of "@media global und nicht separat für jede Bildschirmbreite anwenden"

Ihre Frage ist nicht hier, aber ein paar Tipps.

Um Ihren Stil zu drucken, können Sie wp_add_inline_style() . Suchen Sie ein Stylesheet und haken Sie es an, um Ihre Stile zu drucken, anstatt den Stillink in einer Skriptverknüpfung zu verwenden (was offensichtlich nicht funktioniert). Dies ist ein Beispiel für dich, das in die functions.php Datei deines Theme / Child-Themes geht:

 function add_my_inline_css(){ wp_add_inline_style('HOOK','@media {body { color:black } }'); } add_action('wp_enqueue_scripts','add_my_inline_css',999); 

Das ist die beste Vorgehensweise zum Hinzufügen von Inline-CSS zum Header Ihres Themes. Ändern Sie den HOOK in die Stylesheet-ID Ihres Themes. Sie finden es in der Kopfzeile Ihres Themes auf jeder Seite. Wenn dies beispielsweise der Stil in der Überschrift Ihres Themes ist:

  

Dann ist der Name deines Hakens kymadic . Nachdem Sie den obigen Code verwendet haben, wird dieser dem Header Ihres Themes hinzugefügt:

  

Jetzt ein Tipp für responsives Design. Medienabfragen können auf eine minimale und maximale Breite beschränkt werden. Die allgemeine Syntax für eine Medienabfrage lautet wie folgt:

 @media only screen and (max-width: 1000px) and (min-width: 800px) { ... } 

Dies wird aktiviert, wenn Ihre Bildschirmgröße über 800 Pixel breit, aber nicht größer als 1000 Pixel ist. Sie können eine der Abfragen entfernen, zum Beispiel:

 @media only screen and (max-width: 1000px) { ... } 

Beeinflusst jeden Bildschirm, der kleiner als 1000px ist, und dies:

 @media only screen and (min-width: 800px){ ... } 

Betroffen sind alle Bildschirme, die größer als 800 Pixel sind. Sie können mehr über responsives Design bei W3Schools lesen .