css - Issue with min and max media queries due to using ems? -
im working on mobile first site. media queries set ems so:
html { font-size: 62.5%; } body { font-size: 16px; font-size: 1.6rem; } @media (min-width: 320em) { } @media (min-width: 600em) { } @media (min-width: 770em) { } i need add max-width media query below same breakpoint middle media query, screen size either 1 or other.
if working px easy:
@media (max-width: 599px) { } @media (min-width: 600px) { } can same done ems? reiterate, need screen size in either min or max media query. cant have 'no mans land' in between.
as possible have decimal places on ems think following wont work. screen 599.5ems wide in between 2 media queries.
@media (max-width: 599em) { } @media (min-width: 600em) { }
i've built few sites both min , max width media queries, , me they've been painfully difficult maintain , didn't add value.
i use min-width queries mobile-first sites, because makes sense me think design smallest screen width first , add or change features width increases. has added bonus of eliminating "no man's land" issue. see example: (thanks @imi calculating pixel widths)
when build site this, end specifying changes previous query in each subsequent query, behavior more predictable screen either fall 1 category or other, , whichever 1 falls in, know exactly properties being applied.
html { font-size: 62.5%; } body { font-size: 16px; font-size: 1.6rem; color:black; } @media (min-width: 20em) { /* = 320px */ body {color:red;} } @media (min-width: 30em) { /* = 480px */ body {color:green;} } @media (min-width: 37.5em) { /* = 600px */ body {color:pink;} } @media (min-width: 48.125em) { /* = 770px */ body {color:cyan;} }<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p> random text.</p> </body> </html>
Comments
Post a Comment