Day 57: media queries: range syntax

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 {
…


This content originally appeared on Manuel Matuzović - 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;
  }
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

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

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-2/
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-2/>
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-2/
CHICAGO
" » Day 57: media queries: range syntax." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/12/13/day-57-media-queries-range-syntax-2/
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-2/. [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-2/ |

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.

Related Posts