Media Queries

Media query is one of the powerful tools to design a responsive website. It allows us to create CSS rules on various parameter based on device type, orientation, and viewport size. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Here a particular media feature tells us about the device which is in use. For example, we have screen ,print ,projection , all to know about the media type. In most case, we use screen and print in media queries. A simple syntax of a media query is below.

@media <media-type> and (expression) {
/* your css rules .....
................ */
}

Now let’s talk about the expression. We use this part in the code for targeting the media features such as screen size(width, height),orientation, hover, color, pointer etc. Let’s see an example, this will target the feature “screen size” for a media type screen.

@media screen and (max-width:720px) {
/* css rules.........*/
}

the below example will target when the user’s input mechanism (such as a mouse) can hover over elements.

@media screen and (hover: hover) {
/* css rules........./*

We have seen using the media type and the expressions for the media features so far, now let’s see an example which works for the small screen size like mobile phones. On getting a true for the specific screen size it alters the font-size of p tags inside the web page.

@media all and (max-width:480px) {
   p {
      font-size : 10px;
     }
 }

The possibilities are many, we can shape a web page according to a specific screen size, whether it is for small size iPhone 375px or a medium size iPad 768px or a Mac Book 1366px . Now we can style a webpage with any screen size.

Difference between max-width and min-width

So max-width and min-width is the most common expression you will use in your work for the responsiveness. But there is some confusion regarding this topic. Let’s make them clear.

With min-width, you’re designing a mobile-first experience and with max-width, you’re designing a desktop-first experience.

What it means that if you go for the mobile-first(min-width) then your website will have a default style for mobile and then will apply media queries for the larger screen sizes. Whereas in desktop-first(max-width) your default CSS rules will be for desktop and then it will render the page for the small screen size. Let’s look for an example for a better understanding.

@media all and (min-width:420px) {
   body {
        background-color : red;
        }
 }
@media all and (max-width:420px) {
   body {
        background-color : black;
        }
 }

The min-width:420px will make the background red for screen size which is equal to 420px or greater than that and the max-width:420px will make the background black for the screen size equal to 420px or less than that.

There is cool feature in media queries that allows us to combine both max and min width in the same query.

@media all and (min-width:360px) and (max-width:420px) {
    body {
         background-color : red; 
         }
  }

This will apply the color red to body only for a screen size between 360px and 420px. This is done with the help of and operator between the two.

Media Queries In sass

Using CSS for responsive pages is not all of it. We can use it with a preprocessor like sass for easier maintenance and comfort to write the code. With sass, you are not needed to repeat the same screen size many numbers of time. An example will make it much clearer.

$small: 320px;
$large: 1200px;

.heroImage {
  float: left;
  width: 250px;
  @media screen and (max-width: $small) {
    width: 100px;
  }
  @media screen and (min-width: $large) {
    float: right;
  }
}

the above example makes the image width to 100px for screen 320px or less than that and will make the image to float right for the screen size 1200px or greater than that.

With sass, we are creating cleaner CSS with less duplication of CSS classes across files and it saves development time by eliminating the need to check multiple locations when we are making some changes.

Media queries are with us for a long time for a responsive design and it is still widely used by the web developers. If you want to go deep into this topic, head on to the Mozilla MDN docs. Thank you for reading.