Skip to content
Permalink
master
Go to file
 
 
Cannot retrieve contributors at this time
707 lines (620 sloc) 15.7 KB
cheatsheet do
title 'CSS Device Media Queries'
docset_file_name 'CSS_Device_Media_Queries'
keyword 'media'
source_url 'http://cheat.kapeli.com'
category do
id 'Phones'
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
```'
name 'Portrait and landscape phones'
end
entry do
notes '
```css
@media only screen
and (min-width: 321px)
```'
name 'Landscape phones'
end
entry do
notes '
```css
@media only screen
and (max-width: 320px)
```'
name 'Portrait phones'
end
end
category do
id 'iPhone 4 and iPhone 4S'
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
```'
name 'Portrait and landscape iPhone 4 and iPhone 4S'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
```'
name 'Portrait iPhone 4 and iPhone 4S'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
```'
name 'Landscape iPhone 4 and iPhone 4S'
end
end
category do
id 'iPhone 5 and iPhone 5S'
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
```'
name 'Portrait and landscape iPhone 5 and iPhone 5S'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
```'
name 'Portrait iPhone 5 and iPhone 5S'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
```'
name 'Landscape iPhone 5 and iPhone 5S'
end
end
category do
id 'iPhone 6 and iPhone 6S'
entry do
notes '
```css
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
```'
name 'Portrait and landscape iPhone 6 and iPhone 6S'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
```'
name 'Portrait iPhone 6 and iPhone 6S'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
```'
name 'Landscape iPhone 6 and iPhone 6S'
end
end
category do
id 'iPhone 6 Plus and iPhone 6S Plus'
entry do
notes '
```css
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
```'
name 'Portrait and landscape iPhone 6 Plus and iPhone 6S Plus'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
```'
name 'Portrait iPhone 6 Plus and iPhone 6S Plus'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
```'
name 'Landscape iPhone 6 Plus and iPhone 6S Plus'
end
end
category do
id 'Samsung Galaxy S3'
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 2)
```'
name 'Portrait and landscape Samsung Galaxy S3'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
```'
name 'Portrait Samsung Galaxy S3'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
```'
name 'Landscape Samsung Galaxy S3'
end
end
category do
id 'Samsung Galaxy S4'
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
```'
name 'Portrait and landscape Samsung Galaxy S4'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
```'
name 'Portrait Samsung Galaxy S4'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 320px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
```'
name 'Landscape Samsung Galaxy S4'
end
end
category do
id 'Samsung Galaxy S5'
entry do
notes '
```css
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
```'
name 'Portrait and landscape Samsung Galaxy S5'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
```'
name 'Portrait Samsung Galaxy S5'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
```'
name 'Landscape Samsung Galaxy S5'
end
end
category do
id 'HTC One'
entry do
notes '
```css
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
```'
name 'Portrait and landscape HTC One'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
```'
name 'Portrait HTC One'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
```'
name 'Landscape HTC One'
end
end
category do
id 'iPad mini 1, iPad 1 and iPad 2'
entry do
notes '
```css
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
```'
name 'Portrait and landscape iPad mini 1, iPad 1 and iPad 2'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
and (orientation: portrait)
```'
name 'Portrait iPad mini 1, iPad 1 and iPad 2'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
and (orientation: landscape)
```'
name 'Landscape iPad mini 1, iPad 1 and iPad 2'
end
end
category do
id 'iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2'
entry do
notes '
```css
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
```'
name 'Portrait and landscape iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
```'
name 'Portrait iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
```'
name 'Landscape iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2'
end
end
category do
id 'iPad Pro'
entry do
notes '
```css
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
```'
name 'Portrait and landscape iPad Pro'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
```'
name 'Portrait iPad Pro'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
```'
name 'Landscape iPad Pro'
end
end
category do
id 'Samsung Galaxy Tab 10.1'
entry do
notes '
```css
@media (min-device-width: 800px)
and (max-device-width: 1280px)
```'
name 'Portrait and landscape Samsung Galaxy Tab 10.1'
end
entry do
notes '
```css
@media (min-device-width: 800px)
and (max-device-width: 1280px)
and (orientation: portrait)
```'
name 'Portrait Samsung Galaxy Tab 10.1'
end
entry do
notes '
```css
@media (min-device-width: 800px)
and (max-device-width: 1280px)
and (orientation: landscape)
```'
name 'Landscape Samsung Galaxy Tab 10.1'
end
end
category do
id 'Asus Nexus 7'
entry do
notes '
```css
@media only screen
and (min-device-width: 601px)
and (max-device-width: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
```'
name 'Portrait and landscape Asus Nexus 7'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 601px)
and (max-device-width: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait)
```'
name 'Portrait Asus Nexus 7'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 601px)
and (max-device-width: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape)
```'
name 'Landscape Asus Nexus 7'
end
end
category do
id 'Kindle Fire HD 7"'
entry do
notes '
```css
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
```'
name 'Portrait and landscape Kindle Fire HD 7"'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and and (orientation: portrait)
```'
name 'Portrait Kindle Fire HD 7"'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape)
```'
name 'Landscape Kindle Fire HD 7"'
end
end
category do
id 'Kindle Fire HD 8.9"'
entry do
notes '
```css
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
```'
name 'Portrait and landscape Kindle Fire HD 8.9"'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and and (orientation: portrait)
```'
name 'Portrait Kindle Fire HD 8.9"'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape)
```'
name 'Landscape Kindle Fire HD 8.9"'
end
end
category do
id 'Desktops and laptops'
entry do
notes '
```css
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1)
```'
name 'Non-Retina screens'
end
entry do
notes '
```css
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi)
```'
name 'Retina screens'
end
entry do
notes '
```css
@media only screen
and (min-width: 1224px)
```'
name 'Desktops and laptops'
end
entry do
notes '
```css
@media only screen
and (min-width: 1824px)
```'
name 'Large screens'
end
end
category do
id 'Apple Watch'
entry do
notes '
```css
@media (max-device-width: 42mm)
and (min-device-width: 38mm)
```'
name 'Apple Watch'
end
end
category do
id 'Moto 360 Watch'
entry do
notes '
```css
@media (max-device-width: 218px)
and (min-device-width: 281px)
```'
name 'Moto 360 Watch'
end
end
notes "* Based on a blog post from [css-tricks.com](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
* Converted by [@joelash](https://twitter.com/joelash)"
end
You can’t perform that action at this time.