Jos luulet, että reagoiva on yksinkertaista, minusta tuntuu pahalta pojaltasi. Saimme 99 näkymää, mutta iPhone on vain yksi.
-Josh Brewer, 10. maaliskuuta 2010
Reagoivan suunnittelun tärkein osa on luoda oikea kokemus oikeaan laitteeseen. Kun markkinoilla on useita erilaisia laitteita, tämä voi olla pitkä tehtävä. Olemme koonneet mediakyselyjä, joita voidaan käyttää suunnittelemaan monien vakiomallien ja suosittujen laitteiden malleja, mikä on varmasti lukemisen arvoinen.
Jos etsit kattavaa luetteloa mediakyselyistä, tämä arkisto on hyvä resurssi.
Jos reagoit tähän, sinun ei pitäisi koskaan perustaa katkaisupisteitä laitteisiin !! Sinulla on hyvä asia. Justin Averyllä on mukava viesti mahdollisista sudenkuopista laitekohtaisten katkaisupisteiden käytössä. Rajakohtien valitseminen suunnittelun eikä tiettyjen laitteiden perusteella on älykäs tapa edetä. Mutta joskus tarvitset vain vähän apua tietyn tilanteen hallintaan.
Puhelimet ja kämmenlaitteet
iPhonet
/* ----------- 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-puhelimet
/* ----------- 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-puhelimet
/* ----------- 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-puhelimet
/* ----------- 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 Puhelin
/* ----------- 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) ( )Tabletit
iPadit
/* ----------- 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 Tabletit
/* ----------- 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-tabletit
/* ----------- 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) ( )Kannettavat tietokoneet
Kannettavien tietokoneiden mediakyselyt ovat hieman juggernaut. Sen sijaan, että kohdistat tiettyihin laitteisiin, yritä määrittää yleinen näytön kokoalue ja erota sitten verkkokalvon ja ei-verkkokalvon näytöt.
/* ----------- 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) ( )Puettavat
Kyllä, menemme sinne. Toki nämä eivät välttämättä tarkoita vielä olevan "vakio" laitteita, mutta niitä on hauska tarkastella.
Apple Watch
/* ----------- Apple Watch ----------- */ @media (max-device-width: 42mm) and (min-device-width: 38mm) ( )Moto 360 -kello
/* ----------- Moto 360 Watch ----------- */ @media (max-device-width: 218px) and (max-device-height: 281px) ( )