This blog would be providing you one stop solution for the clean solutions towards solving the problem, instead of just giving just instruction and not actual code.

13 Oct 2013

CSS templates for various standard screen sizes with media queries

No comments :
No talk, just the code.

/* Iphone (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* CSS style */
}

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

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

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

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

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

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

/* Large displays ----------- */
@media only screen 
and (min-width : 1824px) {
/* CSS style */
}

/* iOS 4/4s */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* CSS style */
}

No comments :

Post a Comment