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