Some Media Queries for Responsive Design

Now a days web is moving towards the responsive design. Media Queries are playing a Major role in creating responsive sites.

Without Media Queries its almost impossible to have the Responsive Design. Using Media Queries we can write CSS specific to device like monitor, smartphone, tablets.

Media Queries are Backbone of Responsive Designs.

In this article I am going to share some Media Queries I have collected so far. I might be wrong in some case but no worries comments are always open to point that. I am dividing these in three parts Like Media Queries for Monitors, Media Queries for Smartphones, Media Queries for Tablets.

Media Queries for Monitors

Monitors are divided based on the screen size.

640px

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

}

800px

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

}

1024px

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

}

Media Queries for Smartphones

Getting the most popular Smartphones.

iPhone

/*Landscape Mode*/ @media screen and (max-device-width: 480px) { } /* Portrait Mode */ @media screen and (max-device-width: 320px) { }
/*Landscape Mode*/

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

}
/* Portrait Mode */

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

}

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{

}

HTC Evo

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

}

BlackBerry Torch

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

}

HTC Thunderbolt

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

}

HD2

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

}

Media Queries for Tablets

This is going to be a BIG list. Let’s start with the BIG Boys. :)

iPad

/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{

}

iPad 2

/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{

}

iPad 3

/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{

}

Samsung Galaxy Tab 10.1

/* Landscape Mode */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 800px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{

}

Motorola Xoom

/* Landscape Mode */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 800px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{

}

HTC Flyer

/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 600px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{

}

BlackBerry PlayBook

/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 600px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{

}

HP TouchPad

/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{

}

Lenovo Thinkpad Tablet

/* Landscape Mode */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 800px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{

}

Sony Tablet S

/* Landscape Mode */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 800px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{

}

T-Mobile G-Slate

/* Landscape Mode */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{

}

ViewSonic ViewPad 10

/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 600px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{

}

Dell Streak 7

/* Landscape Mode */ @media (max-device-width: 800px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 480px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 800px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 480px) and (orientation: portrait)
{

}

ASUS Eee Pad Transformer

/* Landscape Mode */ @media (max-device-width: 1080px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 800px) and (orientation: portrait) { }
/* Landscape Mode */
@media (max-device-width: 1080px) and (orientation: landscape)
{

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{

}

I hope this is helpful to you all. Now only one thing is remain to be done is sharing this article so your friends can get this article to read.

Share This Article

  • http://www.xpertdeveloper.com Avinash

    Thanks Falguni for such good list of Media Queries. Surely helpful for all….

    • http://falgunipatel.in Falguni

      I am glad you like this…

  • Gslilley

    I have generally supported: the following resolutions (with fluid column widths)
    Default 980px wide
    Smartphone (landscape)) 480px
    Tablets (landscape) 767px
    Tablets (portrait) 768px
    HD screens 1200px (optional)