Om du tycker att lyhörd är enkel känner jag mig dålig för din son. Vi har 99 visningsportar, men iPhone är bara en.
-Josh Brewer, 10 mars 2010
En viktig del av responsiv design är att skapa rätt upplevelse för rätt enhet. Med en gazillion olika enheter på marknaden kan detta vara en hög uppgift. Vi har sammanfattat mediefrågor som kan användas för att rikta design för många standard- och populära enheter som verkligen är värt att läsa.
Om du letar efter en omfattande lista med mediefrågor är det här förvaret en bra resurs.
Om du reagerar på detta är: du borde aldrig basera dina brytpunkter på enheter !! Du har en bra poäng. Justin Avery har ett bra inlägg om möjliga fallgropar med att använda enhetsspecifika brytpunkter. Att välja brytpunkter baserat på din design och inte specifika enheter är ett smart sätt att gå. Men ibland behöver du bara lite hjälp med att få kontroll över en viss situation.
Telefoner och handdatorer
iPhones
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) ( ) /* Portrait */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- iPhone X ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) ( ) /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) ( )Galaxy-telefoner
/* ----------- Galaxy S3 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) ( ) /* Portrait */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- Galaxy S4, S5 and Note 3 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- Galaxy S6 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) ( )Google Pixel
/* ----------- Google Pixel ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- Google Pixel XL ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) ( )HTC-telefoner
/* ----------- HTC One ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( )Nexus-telefoner
/* ----------- Nexus 4 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) ( ) /* Portrait */ @media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- Nexus 5 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- Nexus 6 and 6P ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 4) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) ( )Windows-telefon
/* ----------- Windows Phone ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 480px) and (device-height: 800px) ( ) /* Portrait */ @media screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 480px) and (device-height: 800px) and (orientation: landscape) ( )Tabletter
iPads
/* ----------- iPad 1, 2, Mini and Air ----------- */ /* 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, 4 and Pro 9.7" ----------- */ /* 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) ( ) /* ----------- iPad Pro 10.5" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) ( ) /* ----------- iPad Pro 12.9" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) ( )Galaxy-surfplattor
/* ----------- Galaxy Tab 2 ----------- */ /* Portrait and Landscape */ @media (min-device-width: 800px) and (max-device-width: 1280px) ( ) /* Portrait */ @media (max-device-width: 800px) and (orientation: portrait) ( ) /* Landscape */ @media (max-device-width: 1280px) and (orientation: landscape) ( ) /* ----------- Galaxy Tab S ----------- */ /* Portrait and Landscape */ @media (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Landscape */ @media (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) ( )Nexus-surfplattor
/* ----------- Nexus 7 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) ( ) /* Portrait */ @media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) ( ) /* ----------- Nexus 9 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) ( ) /* Portrait */ @media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) ( )Kindle Fire
/* ----------- Kindle Fire HD 7" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) ( ) /* Portrait */ @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) ( ) /* ----------- Kindle Fire HD 8.9" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) ( ) /* Portrait */ @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) ( )Bärbara datorer
Mediefrågor för bärbara datorer är lite av en juggernaut. Istället för att rikta in dig på specifika enheter kan du försöka ange ett allmänt skärmstorleksintervall och sedan skilja mellan näthinnan och icke-näthinnan.
/* ----------- Non-Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) ( ) /* ----------- Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) ( )Användbara
Ja, vi åker dit. Visst, dessa kanske inte exakt kvalificerar som "standard" -enheter ännu, men de är roliga att titta på.
äpple klocka
/* ----------- Apple Watch ----------- */ @media (max-device-width: 42mm) and (min-device-width: 38mm) ( )Moto 360 Watch
/* ----------- Moto 360 Watch ----------- */ @media (max-device-width: 218px) and (max-device-height: 281px) ( )