Can anyone explain me @media topic in css

I did not understand what @media does in css . can anyone explain me the topic . If possible I am ready for video session .

Thanks,
Ruthvik

the goal of media queries are to apply certain CSS rules only when the browser/viewport/device fits a certain condition.

An example would be you want a nav menu with each link stacked on top of each other, when the user uses a browser dimension that has a width of 400 px or less. If its 400 px or more, the nav menu has its children links side by side.

Here’s some reading on media queries

There are plenty of resources on the topic, just search for it.

Media Query Basics

The simplest media query syntax looks like this:

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

It consists of:

  • A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).
  • A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.
  • A set of CSS rules that will be applied if the test passes and the media type is correct.
1 Like