Interactive rating component

Community feedback

• 

  Ruan Esterhuyse•170

  @RuanEsterhuysePosted over 2 years ago

  Hi Louise,

  Your solution looks great!

  I will try to answer your question if I understand it correctly. You can use rem and em units instead of px and still match the design without affecting any changes in the size of the elements.

  Rem is only relative to the HTML (root) default browser font size. The default font size is 16px. Em is relative to the font size of its parent element.

  So, 1rem is equal to 16px, 2rem is equal to 32px, 3rem is equal to 48px and so on. For example, if you want to change px to rem for a font size of 20px, it'll be 20/16=1.25rem.

  If you want to use em, divide it by the parent element's font size. If the parent element's font-size is 50px, then 1em = 50px. So, for 20px it will be 20/50 = 0.4em.

  You can also specify a font size on the HTML element, which would make it easier to do the calculations.

  For example, you can set the font size to 10px on the HTML element. That will change the entire layout because it automatically changes all the lengths defined anywhere with the rem unit. 1rem will no longer be 16 pixels. It will be 10 pixels. So, 20px will be 20/10 = 2rem. However, you should not set it to a fixed value like 10px because the root font size will always be 10px. That will create usability problems for users who increase or decrease the font size of their browsers. Therefore, it is better to set it to a percentage of the default font size. 10px divided by 16px = 62.5%.

  html { font-size: 62.5%; }

  Then, 10px is equal to 1rem, 20px is equal to 2rem and so on.

  Marked as helpful

  0