Using rem instead of em or px to handle different responsive behaviour on different screens, setting font-size on html root element:
html { // with 100% 1rem === 16px font-size: 100%; } p { font-size: 1rem; } @media screen and (max-width: 600px) { html { // at 90% 1rem equals to (16px/100 * 90) = 14.4px // our p element will have font-size: 14.4px font-size: 90%; } }
I use this too, but I put the initial font size on body rather than html. Which one is better?
Currently, there is another one:
:root
I think this is the best, I don't think there are differences between HTML and body. Personally I prefer to use html instead of body for font-family and size, but It's a personal idea 😎
Thanks.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Using rem instead of em or px to handle different responsive behaviour on different screens, setting font-size on html root element:
I use this too, but I put the initial font size on body rather than html. Which one is better?
Currently, there is another one:
:root
I think this is the best, I don't think there are differences between HTML and body. Personally I prefer to use html instead of body for font-family and size, but It's a personal idea 😎
Thanks.