CSS Media Queries: Vollständige Liste Frage CSS Media Queries: Vollständige Liste zu Favoriten hinzufügen

Daumen hoch 0 Daumen runter

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! :-)

Antworten


Diese Antwort als GUT bewerten 1 Diese Antwort als SCHLECHT bewerten

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.

Das stimmt natürlich, wer weiß welche Auflösungen die Geräte in ein paar Jahren haben werden. Guter Hinweis!

Pascal D. am 13.11.2012
Diese Antwort als GUT bewerten 1 Diese Antwort als SCHLECHT bewerten
/* @ 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) {}

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten