Ich verstehe nicht vollständig Media Queries

Question

Könnte jemand nur einen Rundown geben? Wie wenn Sie Knöpfe und Bilder und eine Fußzeile oder etwas hätten? Geht alles in eine Medienabfrage oder ist es getrennt? Ich bin sehr verwirrt.

Answer 1

Wie @Berdesdan sagte Medienanfragen spezifischen Styling so einrichten, dass Ihre Website Größen beziehen können zu screenen, usw.

Für mich hängt es davon ab, wie lange die Klassen in Jeder Abschnitt meines Stylesheets ist. Ich habe normalerweise viele Klassen für meine Kopfzeile, Fußzeile und andere Teile meiner Seite. Also füge ich einfach eine Medienabfrage unter jedem Abschnitt meines CSS hinzu. Zum Beispiel;

  /* Header Styles */ 

      .header { width:100%; } 
      .header ul { } 
      .header ul li { } 
      .header ul li a {} 

      @media (min-width:768px){ 
       .header { width:80%; } 
      } 

      /* Footer Styles */ 

      .footer { width:100%; } 
      .footer ul { } 
      .footer ul li { } 
      .footer ul li a {} 

      @media (min-width:768px){ 
       .footer { width:80%; } 
      } 

Auf diese Weise kann ich jeden Abschnitt und ihre Medienabfrage nacheinander bearbeiten. Grundsätzlich können Sie so viele Medienabfragen in Ihrer CSS-Datei haben, wie Sie möchten. Keine Begrenzung.

Ich hoffe, das erklärt. Versuchen Sie, Ressourcen in der w3schools.com-Verknüpfung und anderen Ressourcen auf Media Queries zu überprüfen.

Answer 2

Medienabfragen richten bestimmte CSS-Regeln bei bestimmten 'Flags' ein.

Sie können mit dem Bildschirm in Beziehung gesetzt werden, um bestimmte CSS-Regeln einzurichten, wenn jemand ein Dokument druckt, oder für Screenreader.

Lesen Sie mehr über die folgenden Links.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/css/css3_mediaqueries.asp