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.
html {
@media screen and (min-width: 100px) { font-size: 1px; }
@media screen and (min-width: 640px) { font-size: 10px; }
@media screen and (min-width: 1024px) { font-size: 16px; }
@media screen and (min-width: 1280px) { font-size: 20px; }
}
html {
@media screen and (min-width: 100px) { font-size: 1px; }
@media screen and (min-width: 640px) { font-size: 10px; }
@media screen and (min-width: 1024px) { font-size: 16px; }
@media screen and (min-width: 1280px) { font-size: 20px; }
}
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.
J
Jochem18d ago
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
O
o_O18d ago
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.
J
Jochem18d ago
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
O
o_O18d ago
you're right. changing the font-size setting in my browser isn't changing it on the website. thanks for pointing it out.
J
Jochem18d ago
it still works if you use rem in the html element too, at least in firefox probably chrome too, just haven't tested there
O
o_O18d ago
works on chromium too. just tested with rem instead of px on html
J
Jochem18d ago
it 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
O
o_O18d ago
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.
J
Jochem18d ago
honestly don't have enough experience using either to make a sensible recommendation
O
o_O18d ago
do you manually set it everywhere when you build your apps?
J
Jochem18d ago
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
O
o_O18d ago
not having to worry about responsiveness actaully sounds really good lol
J
Jochem18d ago
it's freeing 😄 Not as useful if you want to build websites nowadays though
O
o_O18d ago
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! ♥️
J
Jochem18d ago
no worries! Good luck 🙂
Want results from more Discord servers?
Add your server
More Posts
How to fix this snap dynamic horizontall scroll effect?I'm trying to make an effect where you firstly scroll verticall, then when reaching a certain point Issue with Making Child Div Inherit Height from Parent <td> without js or absolute positning.I'm facing a problem with making a child div (.auto-box) inherit the height of its parent <td> in HTColor pngMy restraints are kind of weird, but I have game file icons that I want to port to the browser. Its How do i design something like thisI am trying to design this just using div and inside this div ( span ) how can i get the same resultquotes within html attributehow does the browser know which quote ends the attribute value?Card positioning inside a grid container, we want the price and buttons to be the same for each cardhttps://github.com/callum-laing/shopping-site/tree/main/app As you can see in the image, the buttonTrying to align every card so that the button?in before someone mentions the unfinished title. https://github.com/callum-laing/shopping-site/treeTailwind helpI use Tailwind and would like to display the 2 Li elements next to each other with a small distance What's a modern simple logical layout I can use for the main logo?I'm working on a website for my dads business and I just want to keep it really clean and modern. ThHelp with side navigation/sidebarI’m new to JavaScript and I’ve been working on personal projects trying to improve my skills. Couldbackground scrolling when menu is openHello, does anybody know, how to stop background scrolling when you open side menu? I've tried overfescaping the wrapperHey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a vSome serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few dayScroll Shadow in CSSWhen I scroll the white shadow is coming from below. How to make this with CSS. https://www.harpersOverflow-y: auto makes x-axis scrollbar appearHi folks, I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_minFn confusionCodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb I'm not sure where this extra space is coming fTriggering an animation based on scroll positionHi I want to recreate the marquee effect on scroll. https://afundi.im/ Any tips?Need help with a background img?How would I get the background pattern in the card to be behind avatar. I tried using position absolFull-Stack web developer is open for workHi, Everyone Full-Stack web developer is open for work. If you are looking for any **web/blockchain "space-between" with gridHey, is there a way to define the `space-between` value utilized with flex for grid? I tend to use t