Is Media Query Still Relevant? Smarter Use of the Latest CSS Technologies!

Limitations of Media Queries

Media queries change styles based on the viewport size, that is, the width and height of the screen. For example, if the screen narrows, the font size is reduced, or the image size is adjusted. But is this always the best option?

• Only considers viewport: Media queries only consider the viewport size. They ignore the context in which elements interact with each other. For instance, even with the same viewport size, different styles might be needed based on the positioning of the elements.
• Difficulty in management: To accommodate various screen sizes, multiple media queries need to be written. This makes the code complex and hard to maintain.
• Lack of responsiveness: Since styles change only at specific viewport sizes, it is difficult to achieve fluid responsiveness.

Latest CSS Technologies: Flexbox and Grid

Instead of media queries, we can use modern CSS technologies like Flexbox and Grid. These allow flexible adjustment of the size and position of elements.

Example of Flexbox

Flexbox is excellent for arranging elements in rows and columns and for distributing space flexibly. Let’s look at the following code:

main {
  display: flex;
  flex-flow: row wrap;
}

main article {
  flex: 1 1 400px;
}

The above code allows the `<article>` elements to adjust their size flexibly according to the screen size.

Example of Grid

Grid is a method of placing elements by specifying columns and rows. Here is an example using Grid:

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

This code automatically adjusts the number of columns according to the screen size.

Math Functions and Responsive Units

Modern CSS also includes math functions and responsive units that allow flexible adjustment of element sizes. For example, using the `clamp()` function, you can set the minimum and maximum sizes of an element while also setting an ideal size.

.min-and-aspect-ratio {
  aspect-ratio: 1/1;
  width: min(100%, 300px);
}

Container Queries: A New Approach

Container queries change styles based on the size of the parent container of an element. This allows for more detailed and flexible responsive designs.

.cards {
  container: cards / inline-size;
}

@container cards (width < 700px) {
  .cards li {
    flex-flow: column;
  }
}

The above code makes the child elements align vertically when the width of the `.cards` container is less than 700px.

Media Queries Are Still Useful

Media queries are still useful, especially when changing the layout of the entire page or applying styles considering accessibility. However, now it is possible to create better responsive designs by appropriately using various tools beyond media queries.

Conclusion

Media queries have been a core tool for responsive web design, but now there are many better tools available, such as Flexbox, Grid, responsive units, math functions, and container queries. Combining these appropriately is key to modern CSS.

Readers, actively use the latest CSS technologies. You can create more flexible and beautiful responsive web designs!