CSS Media Query Snippets

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.


@media screen and (device-aspect-ratio: 40/71) {



@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


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



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


Galaxy Tab 10.1


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



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

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial