RWD(Responsive Web Design) code for all mobile devices

By using the following code in your stylesheet you may make your website site responsive in various screen resolutions and mobile devices

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

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

/* 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 */
}
/* iphone */
@media only screen and (min-device-width: 480px){}
/* iPhone 5 */
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)
{
/* Styles */
}
/* tablets */
@media only screen and (min-device-width: 768px){}

Advertisements
Posted in Css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s