it-swarm.com.de

In Medienabfragen zu verwendende Breiten

Was sind die wichtigsten Medienabfragebreiten für alle Geräte wie Desktops, Tablets, Laptops/Ipads, Iphones und Smartphones? Gibt es Standardbreiten für diese Geräte?

46
Nishantha

Ich suche überall nach der besten Antwort dafür. Hier was ich gefunden habe.

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Ich denke, das ist besser, wenn man den Mobile First Approach betrachtet. Beginnen Sie mit dem mobilen Stylesheet und wenden Sie dann Medienabfragen an, die für andere Geräte relevant sind. Danke für @ryanve. Hier ist der Link .

75
Nishantha

Ich finde, das sind gute Haltepunkte, von denen aus man anfangen kann, aber man kann immer testen und zwicken, wenn man geht. Ich würde auch vorschlagen, ems anstelle von px für Dimensionen für unterschiedliche Geräteabmessungen und Auflösungen zu verwenden (Gründe, die hier beschrieben werden ( http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries) -ftw / ))

Die obigen Abfragen würden also so aussehen:

@media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:80.063em) { /* hi-res laptops and desktops */ }

Es gibt auch einen tollen Pixel-Taschenrechner hier online ( http://pxtoem.com/ ) Für diejenigen unter Ihnen, die nicht so vertraut sind, einschließlich mir.

17
Terri Swiatek

Versuchen Sie dies einschließlich Netzhaut

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

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

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

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

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

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

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

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

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

Probieren Sie diese Medienabfrage aus, sie wird Ihnen helfen

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

@media (min-width:1024px) and (max-width:1279px) {}

@media (min-width:768px) and (max-width:1023px) {}

@media (min-width:480px) and (max-width:767px) {}

@media screen and (max-width:479px) {}

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

@media only screen and (max-width:767px) {}
1
Amaresh Tiwari

perfekte Medienabfrage

  @media (max-width:400px) {}
    @media (min-width:401px) and (max-width:599px) {}
    @media (min-width:600px) and (max-width:767px) {}
    @media (min-width:768px) and (max-width:950px) {}
    @media (min-width:951px) and (max-width:1050px) {}
    @media (min-width:1051px) {}
0
shammidevd