Adepoju Oluwatobiā¢ 200
@adepoju-oluwatobi
Posted
Rem would work fine, but i also used percentage for the box sizing since it is responsive on its own.
Marked as helpful
1
Design comparison
Solution retrospective
Hello, I'm confused by the concept of responsive design. I tried to use 'rem' everywhere instead of fixed units, but when the screen size changes, the size of the components does not seem to change, so I end up changing the text size of every div by hand. Can anyone recommend a video or article that clearly explains how to think about responsive design? Thanks in advance.
Community feedback
Steveā¢ 1,170
@peanutbutterjlly
Posted
hey š,
All REM is doing is saying that the size is equal to the root elements font size.
typically the root element's default font-size is around 16px; so 1rem is equal to 16px, 2rem is 32px, 3rem is 48px, and so on.
The reason it's preferred to use rems instead of pixels is because when someone changes the font-size (e.g: zooms in/out), if the page has set measurements in pixels instead of rems, those measurements won't change. if the measurements are in rems and someone zooms in/out, then the page will grow/shrink as necessary.
all that to say is that using rems is more of an accessibility fix rather than a responsive fix - here's an article by Austin Gil that explains a little bit:
if you want responsive typography, you can use the clamp() function to help with that:
and here's an article covering responsiveness in general:
web.dev: responsive design basics
hope that helps!
by the way, your solution looks great; looks bout pixel perfect
Marked as helpful
1
Bowenā¢ 280
@bowen-wei
Posted
Thanks a lot for your recommendation ! @peanutbutterjlly
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord