Media Query

Media query is the CSS technique introduced in CSS3. Media queries apply to styles to elements based on media/device type (ex. Screen, print) or some other specific characteristics with parameters (ex. max-width:700px).A media query is an HTML/CSS functionality that allows the content of a Web page to adapt to the type of media that the page is being rendered in, such as a computer screen or that of a phone or tablet. This is considered as a core technology for implementing Responsive Web design and was recommended for implementation as a standard in June of 2012 together with other CSS3 functionalities.

Why is it needed?

Nowadays it is very common for the user community to access any website using laptop/desktop/mobile/etc., (different sizes of the devices). Media Query is very useful to develop responsive websites. It’s essential for any form of mobile responsive design. Search engines also give higher ranks/preferences to websites that are fully responsive.

Media query syntax:

@media (type of device you are going with…) {
     <CSS code >
}

Some basic media queries with AND, OR operator which is very useful for any developer. (for AND we use and) but (for OR we use ,)

Note:-

1. Read the code from top to bottom. Here, the body color is red till 600px. After that it will be blue.

body{
   color: blue
}
@media (max-width:650px) {
   body {
      color: red;
   }
}

2) It always goes with the bottom selector if the selector has the same specificity. For e.g., here, body is the element which is being used as the selector. So, the body color is always going to be blue.

@media (max-width:650px) {
   body {
     color: red;
    }
}
body{
   color: blue;
}

Few Features of Media Queries:

1) width (min & max prefix applicable. e.g., width, min-width, max-width)

- Width of the viewport which includes the width of the scrollbar.

• @media (width:100px) {….}
• @media (max-width:200px) {….}
• @media (min-width:300px) {….}

2) height (min & max prefix applicable)

- Height of the viewport.

• @media screen and (max-height:1200px) {…..}

3) orientation

- Orientation (portrait/landscape) of the viewport.

@media screen and (orientation: landscape) {..}

• Landscape

E.g., when width becomes wider than height then it comes under landscape

@media (orientation: landscape) {
    .title {
       color: red;
    }
}

• Portrait

E.g., When height becomes wider than width then it comes under portrait

@media (orientation: portrait) {
    .title {
        color: green;
    }
}

4) resolution (min & max prefix applicable)

- Pixel density of the output device.

@media screen and (min-resolution:72dpi) {..}

Different media queries examples:

1) @media screen and (min-width:1024px){
        body{
           font-size:19px;
        }
   }
2) @media print and (max-width:794px){
       body{
           margin:2em;
           color:#000;
           background-color:#FFFFFF;
       }
   }
3) @media screen and (min-width: 400px) and (max-width: 700px) {
      p {
        padding-bottom: 5px;
      }
     #heading {
        text-align: center;
        font-weight: bold;
     }
   }
4) @media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 768px) {
     #nav {
       display: none;
     }
  }
5) @media not print {
     @media (max-width:1024px) {
        body {
        background-color: red;
       }
     }
   }
6) @media not all and (max-width: 767px) {
     div {
       padding: 10px;
       font-size:15px;
     }
   }
7) @media screen, print {
      body {
         line-height:1.4em;
      }
   }

Use Case:

1. Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
2. Websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers.

Benefits of Media Query over CSS:

It not only allows you to vary viewport dimensions based on screen size, but also can help you set different style properties for different devices, including color schemes, font styles, motion settings and animations, borders and spacing, and almost any other CSS property you can think of.

About the Author:

Mansi Deshmukh is a Software Developer, focused on creating performant products with delightful user experience. Skilled in Data Structures, Algorithms, Problem Solving and Complexity Analysis.

About CodeStax.Ai

At CodeStax.Ai, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But the real magic? It’s our tech tribe behind the scenes. If you’ve got a knack for innovation and a passion for redefining the norm, we’ve got the perfect tech playground for you. CodeStax.Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us, and be part of the revolution that’s redefining the enterprise tech landscape.