Was ist die beste Vorgehensweise bei Medienabfragen in CSS3?

Question

Ich suche Antworten auf einige Fragen über CSS3 Feature - Media Queries:

1. Welchen Weg ist besser (für Browser aufgrund der Leistung) css Regeln für unterschiedliche Auflösungen für die Erklärung?

   //this in head: 
   <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" /> 
   
   //or this in css file: 
   @media only screen and (max-width: 1024px){ 
       //styles here 
   } 
   

2. Was ist der Unterschied zwischen max-device-width und max-width? Ist es nur Regel adressiert für mobile (max-device-width) oder Desktop (max-width) Browser?

3. Wenn ich Medienabfrage Regel für Tablet mit der Auflösung 1280x800 schreiben, wo Benutzer auch Hoch/Querformat verwenden kann, wie sollte es aussehen? Ich sollte Regeln schreiben für max-width: 800px und max-width: 1280px oder gibt es einen anderen Weg?

4. Wenn ich Regeln schreiben sollte ich so etwas schreiben:

   <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... /> 
   

   oder stattdessen diese zwei:

   <link ... media="only screen and (max-device-width: 480px) ... /> 
   <link ... media="only screen and (max-device-width: 1024px) ... /> 
   

---

P. S. Bitte entschuldigen Sie jede Rechtschreib- oder Grammatikfehler, Englisch ist nicht meine Muttersprache

P.S.S. Bevor ich diese Frage gepostet habe, habe ich eine Weile gebraucht, um auf stackoverflow zu suchen und habe keine Informationen zu dieser Frage gefunden. Wenn ich falsch lag und es ähnliche Fragen gibt, werde ich meinen Beitrag löschen.

Answer 1

1. Regeln in CSS-Datei Anzahl der Anfragen (besser für die Leistung) zu reduzieren.

2. • max-width ist die Breite des Zielanzeigebereich

   • max-device-width wird die Breite der Fläche gesamte Rendering des Geräts

3. Der andere Weg, ich weiß Zum Hoch- oder Querformat hinzuzufügen ist orientation wie folgt:

/* portrait */ 
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) { 
    /* styles here */ 
} 

/* landscape */ 
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) { 
    /* styles here */ 
} 

4. Um ein Stylesheet für den mobilen Geräten mit einer Breite zwischen 320 und 480 Pixel definieren Sie schreiben müssen:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css"> 

// 1 Gleichheitszeichen fehlte, < 6 Zeichen zu begrenzen. Mods, entferne das bitte.Danke

Answer 2

Ich bin auf der Suche nach guten Informationen über Best Practices in Responsive Design und ich werde Ihnen einen Rat geben.

In This question kommt der Entwickler in ein Problem, wenn er CSS-Porträt-Bedingung verwenden und die Tastatur angezeigt wird, wenn er einen Eingabetext des Dokuments auswählen. Ich bin mir nicht sicher warum, aber es bricht die Porträtsituation.

In This website können Sie Informationen über bessere Verfahren finden, wenn Sie Medienabfragen erstellen, die ich für die beste halte. Persönlich verwende ich den exklusiven Typ der Medienabfrage auf meiner Website.

Aber auf der anderen Seite könnten Sie This site Empfehlungen folgen. Ich denke, dass sie richtig sind, aber ich bevorzuge es, beliebte Gerätedimensionen Media-Abfragen selbst zu erstellen und zu verwenden. Hier

ist die Liste:

• < 480px (die ältere, kleinere Smartphone-Bildschirmgrößen gilt)
• < 768px, die für größere Smartphones und kleinere Tabletten

• 768px ideal ist Das gilt für alles Größere wie große Tablet-Bildschirme und Desktop-Bildschirme.

Auch können diese auch verwendet werden, wenn Sie die Energie und Zeit haben:

• < 320px, die Telefone mit geringer Auflösung für ältere klein, groß ist

• 1024px Stylesheet für große Bildschirme auf Desktops.

Ich hoffe, dass es Ihnen helfen.