Over a million developers have joined DZone.

CSS Media Query Snippets

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

With responsive design being big in web design it's important that you design your website so that it can be used on different devices.

There are a number of different media queries that you can use on your design, if you don't know where to start with media queries here is a good boilerplate to go with.

CSS Media Query Boilerplate

This snippet gives you a generic base for your media queries but if you want to target a specific device then you need to change these media queries.

Here is a website that gives you a list of targeted media queries based on some of the most popular devices people use to view a website.

Media Quaery Snippets

Media Query Snippets

Here are some example snippets.

iPhone5

@media screen and (device-aspect-ratio: 40/71) {
}
or
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
}

Blackberry Torch

@media screen and (max-device-width: 480px) { 
}

Samsung S3

@media only screen and (-webkit-device-pixel-ratio: 2) {
}

Google Nexus 7

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
}

iPad Mini

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}

iPad 3

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) { 
}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) { 
}

Galaxy Tab 10.1

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) { 
}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) { 
}





Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}