Hello readers, In this tutorial, we are going to see different types of Media Queries for Resolutions to create a responsive design.

Media Queries for Resolutions:

Here are the different types of Mediq Queries to create a responsive design.

Media Query for  iPhone (Original, 3G, 3GS) :

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/*your css style goes here */
}

Media Query for Smartphone (Portrait):

@media only screen and (device-width: 320px) and (orientation: portrait) {
/*your css style goes here */
}

Media Query for Smartphone (Landscape):

@media only screen and (device-width: 480px) and (orientation: landscape) {
/*your css style goes here */
}

Media Query for (480×800) Android:

@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
/*your css style goes here */
}

Media Query for (640×960) iPhone 4 & 4S:

@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
/*your css style goes here */
}

Media Query for (720×1280) Galaxy Nexus, WXGA :

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
/*your css style goes here */
}

Media Query for  (720×1280) Galaxy Nexus, Landscape:

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
/*your css style goes here */
}

Media Query for (1024×768) iPad 1 & 2, XGA :

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/*your css style goes here */
}

Media Query for  (768×1024) iPad 1 & 2, Portrait:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/*your css style goes here */
}

Media Query for (1024×768) iPad 1 & 2, Landscape:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/*your css style goes here */
}

Media Query for  (2048×1536) iPad 3:

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
/* insert styles here */
}

Media Query for  (1280×720) Galaxy Note 2, WXGA:

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
/* insert styles here */
}

Media Query for (1366×768) WXGA Display”

@media screen and (max-width: 1366px) {
/* insert styles here */
}

Media Query for (1280×1024) SXGA Display:

@media screen and (max-width: 1280px) {
/* insert styles here */
}

Media Query for (1440×900) WXGA+ Display:

@media screen and (max-width: 1440px) {
/* insert styles here */
}

Media Query for (1680×1050) WSXGA+ Display:

@media screen and (max-width: 1680px) {
/* insert styles here */
}

Media Query for  (1920×1080) Full HD Display :

@media screen and (max-width: 1920px) {
/* insert styles here */
}

Media Query for  (1600×900) HD+ Display:

@media screen and (max-width: 1600px) {
/* insert styles here */
}

View More:

Conclusion:

Hope you understand how to use Media Queries for creating responsive design.

Thank You.

Leave a Comment