Medienabfragen für alle Geräte

Question

Gibt es eine einfachere Möglichkeit, meine Website auf verschiedenen mobilen Geräten gut aussehen zu lassen, anstatt eine andere Medienabfrage für alle Geräte festzulegen?

Answer 1

können Sie Medienanfragen verwenden, um Website ansprechbar zu machen, aber Sie haben für verschiedene Bildschirme wie für ipad

/* ----------- iPad mini ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 1 and 2 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 3 and 4 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

Ebenso können Sie sieht für andere Geräte wie Laptops, Tablet PCs, Mini-Telefone usw. Hier anzupassen eine ist Artikel, der die Größe aller Bildschirme für Medienbildschirme angegeben hat https://css-tricks.com/snippets/css/media-queries-for-standard-devices/. Es hat keinen Sinn, das hier wieder zu schreiben.

Abgesehen von Medienabfragen können Sie Frameworks wie Bootstrap verwenden, was die Verwendung von Medienabfragen weniger kompliziert macht, stattdessen können Sie einfach ihre Klassen verwenden, die über vordefinierte CSS verfügen.

Answer 2

Können Sie es einfach durch die Breite tun?

@media screen and (max-width: 480px) { 
    // CSS Here 
} 

Answer 3

Sie verwenden normalerweise wenige Medienanfragen: 1200, 992, 768 und vielleicht 480. Das ist nicht, dass viele ist, wenn Sie Ihre Website voll ansprechbar sein sollen. Alternativ können Sie Bootstrap lernen und verwenden, was Ihnen sehr bei der Reaktionsfähigkeit hilft.