Media queries | Notion

The @media rule is used in media queries to apply different styles for different media types/devices.

In other words, media queries allows us to change the layout when the user switch from one platform to another.

Ex: say we have 2 boxes of text, we want to display them vertically in mobile and horizontally on desktop.

<body>
  <div class="container">
    <!-- box 1 -->
    <div class="box">
      <p>
        <!-- dummy text -->
      </p>
    </div>
    <!-- box 2 -->
    <div class="box">
      <p>
        <!-- dummy text -->
      </p>
    </div>
  </div>
</body>

To start off with, we develop mobile view first since it is smaller and easier to design:

.container {
  display: flex;
  /* set the boxes to display vertically */
  flex-direction: column;
}
.box {
  /* set the box color */
  background-color: gold;
  padding: 1rem;
}
/* target the second element of the box */
.box:nth-of-type(2) {
  background-color: dodgerblue;
}

The issue is that the current boxes are aligned vertically, it is easier to read, but when the screen size gets wider, it is difficult to read each line.

Hence, we need a breakpoint to change the box align horizontally using @media

/* If it is displayed on a screen, whose size is between 600px and 900px  */
@media screen and (min-width: 600px) and (max-width: 900px) {
  .container {
    /* change boxes to display horizontally */
    flex-direction: row;
  }
}

/* If it is printed, make sure font-size use 'pt' unit to look formal as well as 'cm' as padding  */
@media print {
  body {
    font-size: 12pt;
  }
  .box {
    padding: 0.5cm;
  }
}

In sum, we use media queries to apply some certain rules only when some certain conditions are met.