Jika menurutmu responsif itu sederhana, aku kasihan padamu nak. Kami punya 99 viewports, tapi iPhone hanya satu.
-Josh Brewer, 10 Maret 2010
Komponen utama dari desain responsif adalah menciptakan pengalaman yang tepat untuk perangkat yang tepat. Dengan trilyun perangkat yang berbeda di pasaran, ini bisa menjadi tugas yang berat. Kami telah mengumpulkan kueri media yang dapat digunakan untuk menargetkan desain untuk banyak perangkat standar dan populer yang tentunya layak untuk dibaca.
Jika Anda mencari daftar lengkap kueri media, repositori ini adalah sumber yang bagus.
Jika reaksi Anda adalah: Anda tidak boleh mendasarkan breakpoint Anda pada perangkat !! Kamu punya pendapat bagus. Justin Avery memiliki posting yang bagus tentang kemungkinan jebakan menggunakan breakpoint khusus perangkat. Memilih breakpoint berdasarkan desain Anda dan bukan perangkat tertentu adalah cara cerdas untuk melakukannya. Tetapi terkadang Anda hanya perlu sedikit bantuan untuk mengendalikan satu situasi tertentu.
Telepon dan Genggam
iPhone
/* ----------- 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) ( )Ponsel Galaxy
/* ----------- 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) ( )Ponsel HTC
/* ----------- 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) ( )Ponsel Nexus
/* ----------- 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 Phone
/* ----------- 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) ( )Tablet
iPad
/* ----------- 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) ( )Tablet Galaxy
/* ----------- 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) ( )Tablet Nexus
/* ----------- 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) ( )Laptop
Media Queries untuk laptop adalah sesuatu yang luar biasa. Daripada menargetkan perangkat tertentu, coba tentukan rentang ukuran layar umum, lalu bedakan antara layar retina dan non-retina.
/* ----------- 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) ( )Dapat dipakai
Ya, kami pergi ke sana. Tentu, ini mungkin belum sepenuhnya memenuhi syarat sebagai perangkat "standar", tetapi menyenangkan untuk dilihat.
jam apel
/* ----------- 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) ( )