Design comparison
Solution retrospective
This is my sixth challenge in the newbie category.
As for positioning and lay-out i think I understand it clearly than before. But this are still some part that I find confusing. That is when to use em, rem and px. I always set the margin and padding to be in px but as for the font-size, i set it to be em. provided that the body element is set by 1rem. It will be much appreciated if someone can guide me on when to use this units of measurement.
Community feedback
- @Ayman-Shakil192Posted over 1 year ago
Choosing the appropriate unit of measurement can have a significant impact on the responsiveness and accessibility of your website.
Here's a quick rundown of when to use each unit:
px (pixels): This unit of measurement is fixed and doesn't scale with the user's browser settings. It's best used for elements with fixed dimensions, such as borders, images, or icons.
em : This unit of measurement is relative to the font-size of the parent element. It's commonly used for font-size and line-height because it allows for responsive scaling. When using em, keep in mind that it's relative to the parent element's font-size, so nesting multiple elements can lead to unpredictable font sizes.
rem : This unit of measurement is similar to em, but it's relative to the font-size of the root element, which is typically the html element. This means that rem is not affected by the font-size of parent elements, making it more predictable and easier to use for layout and sizing.
In general, it's best to use relative units like em and rem for font-size, line-height, and other layout properties, as they allow for more responsive and accessible designs. For fixed dimensions like borders or images, use px.
It's also worth noting that using relative units for layout can make it easier to implement accessibility features like zooming and increasing text size, as the layout will adapt to the user's preferences.
0
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