Quickly resizing text with media queries
One of the main benefits of using ems (or rems) when sizing type is that you can quickly adjust the size for different viewports via media queries. Here is an example of what I mean:
html {
font-size: 100%; /* Base font-size of 16px */
}
p {
font-size: 1em;
}
@media screen and (min-width: 1920px) {
html {
font-size: 200%; /* Base font-size of 32px */
}
}
Imagine having to go through and manually resize an entire website if you had used pixels!
Written by Joshua Hibbert
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Related Tags
#css
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#