Day 57: media queries: range syntax

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

With CSS Media Queries Level 4, it's possible to use mathematical comparison operators in media queries.

Instead of (min-width: 768px) you can now write (width >= 768px).

Before

@media(min-width: 768px) {
  body {
    background-color: aqua;
  }
}

After

@media(width >= 768px) {
  body {
    background-color: aqua;
  }
}

Before

@media(min-width: 400px) and (max-width: 800px) {
  body {
    border: 40px dotted yellow;
  }
}

After

@media(400px <= width <= 800px) {
  body {
    border: 40px dotted yellow;
  }
}

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-12-13T09:38:54+00:00) Day 57: media queries: range syntax. Retrieved from https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax/

MLA

" » Day 57: media queries: range syntax." Manuel Matuzović | Sciencx - Tuesday December 13, 2022, https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax/

HARVARD

Manuel Matuzović | Sciencx Tuesday December 13, 2022 » Day 57: media queries: range syntax., viewed ,<https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 57: media queries: range syntax. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax/

CHICAGO

" » Day 57: media queries: range syntax." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax/

IEEE

" » Day 57: media queries: range syntax." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax/. [Accessed: ]

rf:citation

» Day 57: media queries: range syntax | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.