CSS Media Queries For All Common Devices

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]

View source →

0 Likes
Maan
Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

There are 3 comments
  1. Hassan Sadek

    Nice, thank you.

  2. How future-proof is this?

  3. Parvez Akhtar

    What about smaller tablets like nexus?

Your email address will not be published. Required fields are marked *

div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://www.downgraf.com/wp-content/uploads/2017/04/login-back.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 500px;}