What are Media Queries?

Media Queries are the way to customize web pages for specific devices like mobile, tablets, large screens and so on.

Media Queries are the part of CSS that are used based on screen sizes. The media query is required for modifying web pages so that it can support a certain screen size and orientation. They make easy for the CSS properties to adjust or change based on the screen sizes. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

How to use Media Query?

• @media : Here this is used when we are writing CSS on current stylesheet.

• @import : @import url is used when we need to use the media queries declared from other stylesheets.

Declaring Media Queries

While we use media queries we must be looking at following points :

• orientation of the device i.e. portrait or landscape

• width of the device

• height of the device

Orientation of device :

When we want your webpages to behave dynamically based on the device we can use portrait or landscape.

• Landscape: This view is usually seen on larger screens like desktops and appears horizontally.

@media (orientation:landscape) {
     .main-container {
       padding: 30px 
    }
  }

• Portrait: This view is for mobile devices and it appears vertically.

@media (orientation:portrait) {
     .main-container {
       padding: 30px 
  }
 }

Width of device :

Here from the above code we see that if the device width is from 0px tp 480px , the div will be in green and if the device width is more than 480px then it is in blue.

Height of the device :

Here from the above code we see that if the device height is from 0px tp 480px , the div will be in green and if the device width is more than 480px then it is in blue.

In the similar fashion we can apply for min-width and min-height.

• We can also combine max and min width like :

@media (max-width:800px) and (min-width:500px) {

Here the CSS styling applies for devices form 500px to 800px.

Standard breakpoints in Media Queries :

• Large Screens : @media (min-width: 1200px) { }

• Medium Screens ,Laptops : @media (min-width: 992px) { }

• Tablets : @media (min-width: 768px) { }

• Mobiles : @media (max-width: 800px) { }

Conclusion :

Media queries plays a very important role in designing a responsive websites. It makes easy to design some complex websites and helps in adapting to different devices.

That's the end of this short blog. See you in the next one.✌