Boilerplate CSS Media Queries for a Responsive Website

0

Boilerplate CSS Media Queries

Based on the device screen, your website or web page need to get change for better user experience. These Boilerplate CSS media queries help to fit web pages in all browsers and smartphones. A responsive website is an advanced concept, where content, menu, ads and image sizes will get change based on different devices screens.

Designing responsive website ?, now you can target the mobile and tablet devices such as Tablets, Smartphones, Ipad, iPhone and other mobile phones by adding the boilerplate CSS media queries.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-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-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

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

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-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 */
}

Leave A Reply

Your email address will not be published.