Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
}
@Jerry-Lau

This comment has been minimized.

Copy link
Owner Author

@Jerry-Lau Jerry-Lau commented Mar 7, 2016

use :root in place of html seems nice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.