CSS Media Queries: Vollständige Liste

12.11.2012 17:26 Uhr

Baue das erste mal ein Wordpress-Theme im Responsive Design um und habe folgende Media Queries entdeckt:

/* Mobile Landscape/Browser */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Anything smaller than standard 960 */
@media only screen and (max-width: 959px) {}

/* iPad Portrait Only */
@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}

/* Mobile Only */
@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}

/* Mobile Landscape Only */
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}

Sind das alle Display-Maße, die man bedenken sollte oder kennt ihr noch andere, weitere?

Gibt es vielleicht irgendwo eine vollständige Liste oder eine Anleitung für den "best case" bei der Umsetzung?

Danke euch! :-)

2 Antworten

#1

12.11.2012 18:09 Uhr

Du solltest dich nicht so auf feste Angaben versteifen. Diese Werte mögen vielleicht jetzt noch bei einigen Geräten passen, aber was ist in ein oder zwei Jahren? Wer weiss, was dann für Geräte mit welchen Auflösungen auf dem Markt sind?

Ich halte es für viel sinnvoller, die Breakpoints abhängig vom Layout zu setzen. Du kannst z.B. dein Browserfenster kleiner machen, und an Stellen, an denen das layout nicht mehr gut aussieht, einen Breakpoint setzen und hier ein media-query erzeugen. Ein sehr nützliches Tool um Breakpoints zu finden ist z.B. responsivepx

Außerdem solltest du auf so vielen Geräten wie möglich testen, denn es gibt immer noch Unterschiede, ob man ein Layout nur in einem verkleinerten Browserfenster oder auf einem echten Gerät anschaut.

#2

06.12.2012 17:54 Uhr 
/* @ iPhone (portrait and landscape)
-----------------------------------------------------------------*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

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


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


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


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


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


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


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


/* @ Orientation Portrait
-----------------------------------------------------------------*/
@media screen and (orientation: portrait) {}


/* @ Orientation Landscape
-----------------------------------------------------------------*/
@media screen and (orientation: landscape) {} 
   

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

Ähnliche Fragen



Datenschutzerklärung · Impressum