html {
    font-size: 20px;
}
h1 {
    font-size: 2rem;
    /* 2rem = 2 * 20ox = 40px
       html 요소의 font-size인 20px이 1rem */
}
html {
    font-size: 16px;
}
body {
    font-size: 1rem; /* 1rem = 16px */
    margin: 1rem;    /* 1rem = 16px */
}
h1 {
    font-size: 2rem; /* 2rem = 32px */
}
html {
    font-size: 16px;
}

....

@media (min-width: 768px) {
    body {
        font-size: 1.25rem; /* 1.25rem = 20px */
    }
}
h1 {
    font-size: 30px;
}
h1 > span {
    font-size: 0.7em;
    /* 0.7em = 0.7 * 30px = 21px;
       부모 요소(h1)의 font-size인 30px이 1em */
}
h1 {
    font-size: 30px;
    line-height: 1.5em;
    /* 1.5em = 1.5 * 30px = 45px
       현재 이 요소의 font-size인 30px이 1em */
}