Why Do We Even Need @Media?

Genuine Question: But why do we need @media, what does it even do? Because I feel like I’m just copying down what’s written in the example page for my HTML/CSS projects with no idea of what it’ll even do because I can’t even see a result. I don’t feel like I’m learning like I usually do.

.my-div {
  font-size: 50px;
}

@media (max-width: 500px) {
  .my-div {
  font-size: 40px;
  }
}

On smaller screens that have a screen width of 500px or less, the font-size for the div with the class my-div will be 40px, on screens larger than 500px the font-size for .my-div will be 50px.

It allows you to give different styles to element depending on the dimensions of the screen it’s being viewed on (the viewport).

W3Schools has good beginner friendly explanations of concepts if you get stuck.

1 Like

Basically, they let you change the styles on the selectors inside it them, using rules for when it happens (like at some width, or height, or viewport direction, etc).

Example
h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.6rem;
}

/* make the font size smaller on screens at/below 460px width */
@media (max-width: 460px) {
  h1 {
    font-size: 1.6rem;
  }

  p {
    font-size: 1rem;
  }
}

1 Like

When you get to the responsive design projects, you will better see what media queries do. Basically, you need media queries so that the elements on your page will look good in all screen sizes.

1 Like

Another good use of media queries is @media print, which is used when printing a page. With that you can omit things like buttons that don’t make sense on a printed sheet, add headers and footers, and so on. Very handy.

2 Likes

it is a CSS selector which enables you adjust the viewport/screen size of any device.

Make a google search about Responsive design to learn more.

1 Like

If you have come to the point where there is media query in the code and you still dont understand what it does, basically you have skipped some other lesson before that. To see the result? You have to resize the browser to see how it affects the components. I suggest looking back at responsive lessons.

1 Like

I didn’t skip them, more like it went in one ear and out through the other. Honestly, I don’t really learn well when it comes to the traditional lesson format, I learn best when I’m thrown to the metaphorical wolves and have to piece things together.

But I’ll for sure go back and review the lessons.

then you could jump to the projects and try to complete those

1 Like

The lessons at least give me some understanding of the framework and a general idea of how things should flow. It’s the specifics like @media or how classes work that escape me.

1 Like

I think the phrase you’re looking for is “thrown in the deep end”

2 Likes

A media query helps in making your page responsive, you can watch Kevin Powell on YouTube, his explanation is super simple and great.

1 Like

I think you can go back to the responsive web design principles for a second , and once you complete the challenge, don’t click on submit and go to next challenge, but close that window, stretch the part of the screen where the output is shown to a large amount and you’ll notice the difference, the text size adjusts differently.

1 Like

You probably just missed it in the lesson; @media is used for smaller screens, such as tablets and smartphones. Try to open the specific lesson on your phone and run it both with and without.