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: 0.875rem; // 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 ( Example bottom ) padding: .5em 1em; border: .125em solid #e3e3e3; @media (min-width: 48rem){ // min-width: 768px font-size: 1.125rem; } @media (min-width: 62rem){ // min-width: 992px font-size: 1.375rem; } } // Example: .container { // font-size: 14px; font-size: .875rem; width: 80rem; button { font-size: .875rem; // Still use font-size: 14px padding: .5em 1em; border: .125em solid #e3e3e3; @media (min-width: 48rem){ // min-width: 768px font-size: 1.125rem; } @media (min-width: 62rem){ // min-width: 992px font-size: 1.375rem; } } }
Last version:
- Add @media to show how change value 'em' at different breakpoints
- Change '.button' into 'button'

1 Response

You might want to read this on the using REM in media queries: http://zellwk.com/blog/media-query-units/

Write a 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.