CSS Grid, CSS, HTML

Community feedback

• 

  LetsFrontend•500

  @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 a font-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 helpful

  1

  ---

  

  Bryan Sanchez•590

  @0-BSCodePosted over 3 years ago

  @B1N4R1 Thank you so much for the information and advice!

  0