Skip to content
Submitted 10 months ago

Responsive QR Code Component - Flexbox

Jirosu•20
@Jirosu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi!, this is my first solution in Frontend Mentor so I chose the QR Code Component as a good starting point in the plataform. I was wondering if a should I use rem units instead of px. And if so, is there a particular reason?

I'd really appreciate any feedback. Thank you for reading!

Community feedback

  • RevazSologhashvili•210
    @RevazSologhashviliPosted 10 months ago

    Hi

    rem stands for “root em”. It is relative to the root element, which is usually the <html> element. By default, 1 rem is equal to the font size of the root element, which is typically 16px. So, if you set the font size of an h1 element to 2rem, it would be equivalent to 32px.

    em is relative to the font size of its closest parent element. If you set the font size of an h1 element to 2em and its parent element has a font size of 20px, the h1 font size would be 40px.

    Here are some examples:

    <html style="font-size: 16px;">
  <body style="font-size: 1.5em;"> <!-- This is 24px (1.5 * 16) -->
    <h1 style="font-size: 2em;">Hello World</h1> <!-- This is 48px (2 * 24) -->
  </body>
</html>

    In this example, the h1 element has a font size of 48px because its parent’s font size is 24px (which is 1.5em or 24px of the root’s font size).

    <html style="font-size: 16px;">
  <body style="font-size: 1.5rem;"> <!-- This is 24px (1.5 * 16) -->
    <h1 style="font-size: 2rem;">Hello World</h1> <!-- This is 32px (2 * 16) -->
  </body>
</html>

    In this example, the h1 element has a font size of 32px because it is set to 2rem, which is based on the root element’s font size, not the parent’s.

    Using rem and em can indeed make your website more responsive and accessible. They allow users to adjust the default font size in their browser if needed, which can be especially helpful for visually impaired users. However, it’s not the only reason to use them. They also make it easier to scale your design, maintain consistency, and make your CSS more readable and easier to manage.

    Remember, there’s no one-size-fits-all solution in CSS. The best approach depends on your specific needs and the context of your project. Happy coding! 😊

    Marked as helpful
    2
    Jirosu•20
    @JirosuPosted 10 months ago

    @RevazSologhashvili Thank you, it helped me a lot to understand which units are most appropriate to use.

    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