Introduction

A media query is a CSS functionality that allows the content of a Web page to adjust to the type of media that the page is being executed in, with a different screen like Desktop or mobile. Its introduce with CSS3, In simple words, we can say its an if-else block which execute when a written condition is true.

For example, If we wanna change page background color in tablet mode we can write,

@media only screen and (min-width: 768px) and (max-width: 999px) {
  body {
    background-color: red;
  }
}

Below is the screen size for different devices.

Big tablet view

@media only screen and (max-width: 1024px){
  //css
}

Tablet view

@media only screen and (min-width: 768px) and (max-width: 999px){
  //css
}

Mobile view

@media only screen and (max-width: 767px){
  //css
}

Desktops and laptops view

@media only screen  and (min-width : 1224px) {
 //css
}

Large screens view

@media only screen  and (min-width : 1824px) {
 //css
}

 iPads (portrait and landscape) view

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 //css
}

iPhone 6, 7, 8 view

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
 //css
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
 //css
}

iPhone X view

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
 //css
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
 //css
}

iPhone XS Max, XR view

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
 //css
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
 //css
}

 

There are some rules to create dynamic pages or websites.

1. Always go with Mobile design first.
2. Design for both Orientation Portrait / Landscape.
3. Don’t use inline CSS for web pages.