HTML and CSS With flexbox for mobile and Grid for desktop is used.
Design comparison
Solution retrospective
Greetings all,
Any suggestions and feedback will highly appreciated on anything.
It looks like I am having hard time moving on from "px" to relative units. As I was using % for some, everything was moving like crazy when I was resizing the browser. Any guidelines on how do I incorporate more relative units in projects?
Best regards, KT
Community feedback
- @steventobenPosted almost 4 years ago
The main relative unit you should be using is rem. Rem units are relative to the size of the root font-size, which is usually 16px by default but can be changed in the browser's settings. User rem to set font-size, padding, margin, dimensions, etc. It's the main unit to use because it will scale to whatever the user has set their font-size to, so it helps with accessibility. Em is similar but it's relative to the selector's font-size instead of the root one. The value of a rem won't change, but the value of an em can. Em is really only useful for a couple things like media queries, letter-spacing, and if you want something relative to a component's font-size. vw is the width of your window, vh is the height of your window, so those could come in handy on occasion. Ex is the size of the lowercase 'x' of your font and it's not used for much. Ch is the width of the '0' and can be used to limit the width of paragraphs based on rough character limits. Rem is going to be the main unit, and most simplest unit to use. I would definitely stay away from any absolute units in almost every scenario.
0@KtGitItPosted almost 4 years ago@steventoben
Thank you Steve, It is very useful information. In my future projects, I will start using rem more.
0
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