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
[cc lang=”css”]
@media screen and (max-width: 640px)
{
}
[/cc]
800px
[cc lang=”css”]
@media screen and (max-width: 800px)
{
}
[/cc]
1024px
[cc lang=”css”]
@media screen and (max-width: 1024px)
{
}
[/cc]
Media Queries for Smartphones
Getting the most popular Smartphones.
iPhone
[cc lang=”css”]
/*Landscape Mode*/
@media screen and (max-device-width: 480px)
{
}
/* Portrait Mode */
@media screen and (max-device-width: 320px)
{
}
[/cc]
iPhone 4
[cc lang=”css”]
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
}
[/cc]
HTC Evo
[cc lang=”css”]
@media screen and (max-device-width: 480px)
{
}
[/cc]
BlackBerry Torch
[cc lang=”css”]
@media screen and (max-device-width: 480px)
{
}
[/cc]
HTC Thunderbolt
[cc lang=”css”]
@media screen and (max-device-width: 480px)
{
}
[/cc]
HD2
[cc lang=”css”]
@media screen and (max-device-width: 480px)
{
}
[/cc]
Media Queries for Tablets
This is going to be a BIG list. Let’s start with the BIG Boys. :)
iPad
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
[/cc]
iPad 2
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
[/cc]
iPad 3
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
[/cc]
Samsung Galaxy Tab 10.1
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
[/cc]
Motorola Xoom
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
[/cc]
HTC Flyer
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{
}
[/cc]
BlackBerry PlayBook
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{
}
[/cc]
HP TouchPad
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
[/cc]
Lenovo Thinkpad Tablet
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
[/cc]
Sony Tablet S
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
[/cc]
T-Mobile G-Slate
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
[/cc]
ViewSonic ViewPad 10
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{
}
[/cc]
Dell Streak 7
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 800px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 480px) and (orientation: portrait)
{
}
[/cc]
ASUS Eee Pad Transformer
[cc lang=”css”]
/* Landscape Mode */
@media (max-device-width: 1080px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
[/cc]
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.
Thanks Falguni for such good list of Media Queries. Surely helpful for all….
I am glad you like this…
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)