Design comparison
Solution retrospective
My main point of confusion is why is rem useful as a unit of measurement? I've seen a lot of other solutions using this in their projects and I have read up on the uses of it on my own. However, I can't seem to wrap my head around why the rem unit is useful. I'd be more than happy to learn more about it!
Community feedback
- @B1N4R1Posted over 3 years ago
Hi bryan,
We use rems mostly for responsiveness, here an example of it:
- We set
font-size: 16px
in the*
selector and then we set afont-size
for an h1 element like this:h1{font-size: 2rem}
, this will give us a 32px h1 element. The problem now it would be that it'll look great in a laptop but in a mobile it may look a bit big, to fix this we'll use media queries and will set something like:
@media (min-width: 768px){ *{ font-size: 12px; } }
- Now the font-size of the h1 element it will be 24px and it will fit better in a mobile size
That would be a good reason why you should use rems to set a font-size. If you want a more extend explanation about this you can go check this article where Kathleen McMahon dives deep into this subject.
Also: Your solution looks way to small in 4k screens mainly bc of the font-size set in the * selector
Cheers!
Marked as helpful1@0-BSCodePosted over 3 years ago@B1N4R1 Thank you so much for the information and advice!
0 - We set
Please log in to post a comment
Log in with GitHubJoin 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