@media screen for different mobile devices-responsive design

Concept:

Device-pixel-ratio: Defines the ratio of the visual width to the visible height of the input device screen.

Device-width: Enter the visual width of the device screen.

Orientation: The screen is oriented vertically. Landscape is horizontal, Portrait is Portrait "ipad opposite"

/* IPhone 4 ——— –*/

@media

Only screen and (-webkit-min-device-pixel-ratio:1.5),

Only screen and (min-device-pixel-ratio:1.5) {

/*styles*/

}

/* IPads (Portrait) ——— –*/

@media only screen and (min-device-width:768px)

and (MAX-DEVICE-WIDTH:1024PX) and (orientation:portrait) {

/*styles*/

}

/* Smartphones (Portrait and landscape) ——— –*/

@media only Screens

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 */

}

Original: http://www.frontopen.com/2728.html

@media screen for different mobile devices-responsive design