Last active
March 7, 2016 07:15
-
-
Save jerrylau91/feab5d485a1b56a9e74c to your computer and use it in GitHub Desktop.
correct use "em" with "rem" without "px"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
use :root in place of html seems nice!