:root {
font-size: 16px;
}
// Or you can use html
// html {
// font-size: 16px;
// }
body {
font-size: 1rem;
}
button {
font-size: 1.2rem;
// 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
padding: .5em 1em;
border: .0125em solid #ededed;
}
// Example:
.container {
// font-size: 14px;
font-size: .875rem;
.button {
font-size: .875rem; // Still use font-size: 14px
padding: .5em 1em;
border: .0125em solid #ededed;
}
}
Last version:
- Add @media to show how change value 'em' at different breakpoints
- Change '.button' into 'button'
- Add @media to show how change value 'em' at different breakpoints
- Change '.button' into 'button'
Be the first to 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.