Doing responsive text by using media queries on :root to change the font size for smaller screens.
While trying to figure out a good way to do responsive text without manually setting font size using each media queries, I came up with an approach.
I'll use
rem everywhere for font-size and then use media queries on my html tag to change the size of root. This way I can control the breakpoints from one place which is something I've been struggling with.
Is this a good or a terrible idea? I can quickly change font-size and breakpoints of the entire app from one place instead of going to every place and change the rem value for font, which is pain to do.
Edit: shoul've used rem instead of px inside media queries.15 Replies
it's terrible for accessibility
setting font size in pixels takes away the end user's ability to adjust the font size to suit their needs
I am using rem not px. the pixel is only used on the root element so you can change the zoom level and it'll be respected.
you can change the zoom level, but not the font-size if all you need is a slightly larger font
you can try using this and setting the font size in the html using rems too if you prefer, but you should never set a font size with pixels, at least not without using at least some (r)em component
you're right. changing the font-size setting in my browser isn't changing it on the website. thanks for pointing it out.
it still works if you use rem in the html element too, at least in firefox
probably chrome too, just haven't tested there
works on chromium too. just tested with rem instead of px on
htmlit does make for a nice centralization if you do this though. You can probably also use variables if you wanted, depending on how you want to lay out your css
You can probably also use variables if you wanted,yea I saw kevin's video in which he used
clamp() with vw and css variables. which method would you recommend?
css vars or the way I did it.honestly don't have enough experience using either to make a sensible recommendation
do you manually set it everywhere when you build your apps?
purely from a code-cleanliness point of view, I'd lean towards variables though. This is effectively abusing the font size as a variable, and while I can't immediately think of any downsides, there might be ones I'm missing
most of my experience is in building business software that is 100% intended for use on desktops. My last big project even had a monitor size requirement we set, so I don't mess with media queries a ton
not having to worry about responsiveness actaully sounds really good lol
it's freeing 😄 Not as useful if you want to build websites nowadays though
since I am using tailwind and tailwind uses rem for everything, changing base font on html is messing up the entire app for me. for this project I'll go with using css variable in conjunction with css clamp and for my next one I'll try the afomentioned method.
thanks mate! ♥️
no worries! Good luck 🙂