Wie helfen Ihnen Medienabfragen beim Entwerfen responsiver Websites für verschiedene Bildschirmgrößen?

Medienabfragen zur Anpassung der Bildschirmgröße

Beim Entwerfen von Weblayouts für mehrere Bildschirmgrößen werden Medienabfragen zu unverzichtbaren Werkzeugen. Mit diesen Abfragen können Entwickler angeben, wie ein Layout basierend auf der Breite des Bildschirms angepasst werden soll.

Medienabfragen für bestimmte Bildschirmgrößen anwenden

Um eine bestimmte Bildschirmgröße anzusprechen, verwenden Sie das Medienattribut mit die Eigenschaft max-width. Um beispielsweise Stile auf Bildschirme mit einer Breite von weniger als 800 Pixel anzuwenden, verwenden Sie:

@media screen and (max-width: 800px) {
  /* Styles for screens less than 800px wide */
}

Verwenden des bereitgestellten Codebeispiels

Das bereitgestellte Codebeispiel verwendet die folgenden Medienabfragen:

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles for smartphones in portrait and landscape */
}

/* Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
  /* Styles for smartphones in landscape */
}

/* Smartphones (portrait) */
@media only screen 
and (max-width : 320px) {
  /* Styles for smartphones in portrait */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles for iPads in portrait and landscape */
}

/* iPads (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles for iPads in landscape */
}

/* iPads (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles for iPads in portrait */
}

/* Desktops and laptops */
@media only screen 
and (min-width : 1224px) {
  /* Styles for desktops and laptops */
}

/* Large screens */
@media only screen 
and (min-width : 1824px) {
  /* Styles for large screens */
}

/* iPhone 4 - 5s */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles for iPhone 4 - 5s */
}

/* iPhone 6 */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles for iPhone 6 */
}

/* iPhone 6+ */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /* Styles for iPhone 6+ */
}

/* Samsung Galaxy S7 Edge */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
 /* Styles for Samsung Galaxy S7 Edge */
}

Diese Medienabfragen decken ein breites Spektrum an Bildschirmgrößen ab, darunter Smartphones, Tablets und größere Bildschirme.

Zusätzliche Überlegungen

Erwägen Sie die Verwendung von em-Werten anstelle von Pixeln für mehr Flexibilität bei verschiedenen Bildschirmgrößen. Weitere Hinweise finden Sie im Artikel „Media Query Units“ von Zell Weekley.

Das obige ist der detaillierte Inhalt vonWie helfen Ihnen Medienabfragen beim Entwerfen responsiver Websites für verschiedene Bildschirmgrößen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!