SCSS: Correct use "em" with "rem" without "px"

:root { font-size: 16px; } // Or you can use html // html { // font-size: 16px; // } body { font-size: 1rem; } button { font-size: 1.2rem; // All the internal/external value use in 'em' // This value use of your "font-size" as the basic font size // And you will not have any problem with the font size of the container padding: .5em 1em; border: .0125em solid #ededed; } // Example: .container { // font-size: 14px; font-size: .875rem; max-width: 80rem; width: 100%; .button { font-size: .875rem; // Still use font-size: 14px padding: .5em 1em; border: .0125em solid #ededed; } }
Last version:
- Add @media to show how change value 'em' at different breakpoints
- Change '.button' into 'button'

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.