Logic in CSS Media Queries (If / Else / And / Or / Not) | CSS-TricksJust in case you have brain farts about the logic in CSS media queries about this constantly, as I do. If That’s what media queries are: logical if statements. “If” these things are true about the browser, use the CSS inside. /* IF the viewport is 550px or smaller, do this */ @media (max-width: 550px) { html { background: hsl(0 0% 0% / 0.5); } } Media Queries Level 4 allows for a comparison syntax
