Design comparison
Solution retrospective
This is my first try on this challenge. Any feedback or suggestion would be appreciated.
Community feedback
- @Abo3bazezPosted 2 months ago
Using rem and em instead of
px
in CSS offers significant advantages, especially when it comes to responsive design, accessibility, and maintainability. Here’s some feedback on the benefits of adopting rem and em units:Advantages: 1.Responsive Typography:
rem
andem
are relative units, making it easier to create scalable layouts. When users adjust browser settings (e.g., zoom or base font size), designs based on rem/em scale appropriately, whereas px-based designs remain fixed.2.Accessibility:
Relative units like rem and em respect user preferences, especially for those with visual impairments who adjust their base font size for better readability. Designs using
px
ignore such user-defined settings, potentially causing readability issues.3.Consistency Across Devices:
rem
andem
units ensure consistent rendering across various devices and screen sizes. For example, usingrem
for layout dimensions allows elements to scale based on a user’s default font size, creating a more fluid and adaptable design.4.Easier Scaling of Elements:
By using
rem
for root-level elements andem
for nested elements, you can control the scaling of individual components more effectively. This flexibility is helpful for modular design systems, where you want components to be flexible and adapt to their context.5.Maintaining Proportions:
Using relative units helps maintain proportions between text sizes and other layout elements (like padding, margins, etc.), which becomes crucial for responsive designs. This eliminates the need to manually adjust pixel values for different breakpoints.
1
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