Jason Knight
2 min readOct 1, 2020

--

Fluid isn't just % base. Max width is also a form of fluid; oft called "semi-fluid" because inside the max-width it's fluid, but it won't grow bigger. Not a single blasted broken percentage needed.

In fact, % layouts are often some of the most broken crap -- especially for side columns -- when dynamic fonts are in play. Hence why you'll oft see good layouts

Dynamic fonts (%/EM) being the core of elastic layout, another of the many things a quality design should be.

The IDEAL is semi-fluid elastic and responsive. Semi-fluid so as to restrict long lines from becoming unwieldy whilst not screwing over the minimum width of side columns, elastic so the entire layout dynamically sizes to the user's default font-size preference SEPARATE from zoom, and responsive because, well... we should all know that by now.

And "generally" if you're thinking in pixels, such as "801px" for desktop, nobody's thinking. Pixels are a broken inaccessible wreck for non-standard font-size users, so 99% of the time you see px in a media query, you're looking at ignorant incompetent TRASH.

Much less the derpitude of pre-planning breakpoints at specific PX sizes instead of developing them based on the needs of your content and/or device. Pre-determined breakpoints are ALSO a steaming pile of manure. Hence when you do something like @media(max-width:800px) you're in all likelihood made a layout that's broken for users like myself who don't start out with that magical 16px == 1REM.... since most of my machines 1 REM == 24px and on my media center it's 32px.

Hence your "16px == 1em" is utter nonsense! Same as that ignorant BALD FACED LIE of 62.5% == 10px… 1em could be almost anything, same for REM, because you can set it manually in the browser and good browsers inherit it from the OS. As such on body, without setting anything, 1EM could be 12px (like on my old SparcStation), 16px (VGA/normal/win v+ small/100%/96dpi), 20px (8514/large/win v+ medium / 125% / 120dpi / pickAHuffingNameAlready), 32px (retina/hdx/4k displays set to posiscaling) or any other possible value. THERE IS NO FIXED RELATIONSHIP BETWEEN PIXELS AND EM, EVEN AT THE VERY START BEFORE YOU DECLARE ANYTHING IN YOUR STYLESHEET!

They're called EM, use 'em! And don't expect their relationship to PX to be fixed, it isn't.

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

No responses yet