CSS Media queries are an outstanding way to provide distinctive styles to different devices that’s the most excellent experience for every user. A part of the CSS3 specification as the role of the media attribute has been extended by CSS media queries which helps to let you know that how to control the style you applied.
[css]
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait & landscape)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
/* iPhone 5 (landscape)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
[/css]
