Understanding Media queries in CSS

Media queries in CSS took me a very long time to grasp and understand the concept. But, now I can say that I can teach this topic to other people.

In web development, we have several breakpoints to target different screen sizes. This is done to achieve responsiveness in web design.

A concept I like to call “Build once, run anywhere”. This is where you build one website and it is able to scale to different screen sizes. I want you to think of media queries as a range of numbers.

Mobile devices range from 0-575px in width.

Small devices (large phones, small tablets) range from 576px-767px

Medium devices (tablets) range from 769-991px in width.

Laptops, small desktops range from 992-1199px in width.

Larger desktops range from 1200-1399px in width.

XXL devices (ultra-wide screens): 1400px and above

Targeting different screen sizes

CSS 3 provides an option to target those varying screen sizes - media query. we have three options;

1. max-width

2. min-width

3. min-width and max-width (this is for handling range)

INDEX HTML CODE

<section class="section">
        <div class="container">
            <div class="intro">
                <h1 class="heading">Welcome to Media queries</h1>
                <p>Author: Chima Ifeanyi</p>
            </div>
        </div>
    </section>

STYLE CSS CODE

.intro {
    background-color: aqua;
    color: white;
}

.header {
   font-size: 48px;
}

Example 1: max-width: 567px

max-width means maximum width, so what does it do ?

well, it targets devices with a screen size ranging from zero (0px) to a maximum of 567px. Therefore any css style you write will only be applied to those screen sizes. Here is an example:

This will target screen sizes from 0 to a maximum of 567px and change the background color of the div and the font-size of the header.

/* Mobile device */
@media (max-width: 567px) {
    .heading {
        font-size: 24px;
    }
    .intro {
        background-color: red;
        color: white;
    }
}

Example 2: min-width: 568px

min-width means minimum width, so what does it do ?

This targets devices with a screen size starting from the specified width (568px) and above. Any CSS within this media query will only apply to screens that are at least 568px wide.

/* Tablet screens */
@media (min-width: 568px) {
    .heading {
        font-size: 52px;
    }
    .intro {
        background-color: chartreuse;
        color: black;
    }
}

Example 3: range from 769px - 1279px

This approach allows you to target a specific range of screen sizes. This is particularly useful when you need to fine-tune styles for a specific device category.

/* RANGE */
@media (min-width: 481px) and (max-width: 768px) {
    .heading {
        font-size: 62px;
    }
    .intro {
        background-color: chocolate;
        color: white;
    }
}

You can use media queries to target other things, such as SCREEN HEIGHT and SCREEN ORIENTATION.

Example: screen orientation

we can issue command for the css styling that will take effect when the user device is in landscape mode or in portrait mode.

@media (orientation: landscape) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (orientation: portrait) {
  .gallery {
    display: flex;
    flex-direction: column;
  }
}

Thank you for reading.