Jayesh Patel

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

/* Responsive Structure */
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

4 Responses


  1. Nimesh on 07 Sep 2012

    Thanks Jayeshbhai :)

  2. Bhavesh Patel on 07 Sep 2012

    Handy code snippet. thanks for sharing it.

    Moder browser has made life very simple and this code is one of it’s part.

  3. jignasa on 24 Sep 2012

    Thank you all. You are also invited to share your knowledge with us.

  4. jayeshhpatel on 02 Oct 2012

    Thank you for your valuable comment & A very impressive information. it’s too informative.


Leave your comment

You must be logged in to post a comment.

Share IT © 2018. All rights reserved.