Hello Fellow Codenewbies 👋

So let's say we have finished styling our app.
But on a certain size of the page view, we want to apply a different style to our app.
This is the time where media queries come into play.

Media Queries

Media queries are used for responsiveness purposes.
It targets some specific types and conditions to apply a different style.

The Syntax And Explanations

The syntax:

@media () {...}

We put it this way:

@media media-type and (media-conditions) {...}

media-type

Different types of media that we target with media queries.

screen
It targets the screen-based device such as mobile phone, tablet, or desktop.
```
@media screen (...) {...}
```
print
It targets a document for printing purpose.
This type allows users to print out a page in a format that we have set the rules on.
```
@media print {...}
```
speech
It targets the devices that read the content audibly, such as a screenreader.
```
@media speech {...}
```
all
It targets all media types above.
⭐ This is what is commonly used.
```
@media all and (...) {...}
```
When we don't assign any type, then by default it will fall into all.
```
@media (...) {...}
```

media-condition

Specific conditions that we target with media queries.

Width
```
@media (min-width: ...) {...}
```
or
```
@media (max-width: ...) {...}
```
or
```
@media (min-width: ...) and (max-width: ...) {...}
```
- min-width
  Applying specific style from the size of the stated value and bigger.
  When we are doing mobile-first, we start with min-width first and add more rules as we increase the size.
- max-width
  Applying specific style until the stated value.
  When we are designing our app for desktop-first and working our way down, then we better start with max-width.
  
  📝 Applying min-width and max-width:
```
@media (min-width: 400px) and (max-width: 800px) {
 .container {
    display: flex;
 }
}
```
  📖 From width of 400px until 800px apply display: flex to the element with class container.

Orientation
```
@media (orientation: portrait) {...}
```
or
```
@media (orientation: landscape) {...}
```
- portrait
  The orientation when the page view is taller than wide
- landscape
  The orientation when the page view is wider than tall

Additional Important Notes

Applying both media-types and conditions are optional.
We don't need to apply both, but we do have to apply at least one of them.

To combine media-type with media-condition we have to use and.

@media screen and (min-width: 640px) and (max-width: 1000px) {...}

Order is important.
Sticking to the basic CSS rule, whatever comes next wins.
So we need to apply media queries after the initial style to override it.
A good way to do this is to put media queries at the bottom, at the end of all initial style codes.

We have to state the element that we want to modify inside the media queries block scope.

body {
   margin: 0;
   padding: 0;
}

h1 {
   color: green;
}

.container {
   margin: 0 auto;
}

.bigger-paragraph {
  font-size: 2rem;
}

@media (min-width: 500px) and (orientation: landscape) {
  h1 {
     color: blue;
  }

  .bigger-paragraph {
    font-size: 4rem;
  }
}

I provide the Codepen below to play with.

https://codepen.io/adiati/pen/qBajzGo

Conclusion

We use media queries for responsiveness purposes.
The targets of media queries:
- media-type
  - screen
  - print
  - speech
  - all (default) ⭐
- media-condition
  - width
    - min-width
    - max-width
  - orientation
    - portrait
    - landscape

CSS: Media Queries

Comments

Start To Think Responsive In CSS

CSS Flexbox: flex-direction

More from this blog

I Was Skeptical of AI. Then It Saved Me Hours of Writing.

From Helping Out to Taking Ownership: The Art of Sticking Around

The Curated, Automated Open Source Portfolio: How It’s Going

Open Source Engagement: What's Working Now?

Beyond Hacktoberfest: Building a True Open Source Journey

Media Queries

The Syntax And Explanations

media-type

media-condition

Additional Important Notes

Conclusion

Command Palette

Comments

Start To Think Responsive In CSS

CSS Flexbox: flex-direction

More from this blog

Media Queries

The Syntax And Explanations

media-type

media-condition

Additional Important Notes

Conclusion