@MikDra1
Posted
Limited Browser Support for :root Variables:
- The :root variables might not work correctly in older browsers. Providing fallbacks could improve compatibility. Here is a quick VIDEO about how you can create a fallback to the variable
Font Sizing and Scaling:
- If the font size is defined in pixels (px), it could create scaling issues on different devices. Using em or rem would be more flexible. And here is how we use rems:
html {
font-size: 62.5% // It means that 1rem = 10px. From this it is easier to use rem
}
p {
font-size: 1.6rem; // Here this paragraph font-size will be 16px;
}
If you don't understand it already here is a VIDEO
Hope you found this comment helpful š
Good job and keep going ššš
Marked as helpful
@keinermendoza
Posted
@MikDra1 Thanks for taking the time to read the code and share your knowledge.
I watched the two videos I will use a fallback for the css vars, thanks for the suggestion and I finally understand why some people use em for margins and padding. š
I am wondering if there is a side effect to setting the font-size in html other than affecting rem units.
@MikDra1
Posted
@keinermendoza
It can affect browser default styles which are set in rem's. But beyond that if you understand REM well enough there won't by any obstacles for you.
Like if you set 1rem = 10px then all of the sudden your paragraphs will get smaller because theirs font-size is set to one rem. An easy fix for this is to set the font-size on body to 1.6rem;
Hope you found this response useful ššš
