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; } } }