RWD: relative font size

by Eddie Lin

HTML

<div id="container">
    <div class="large">我比較大</div>
    <div>我是基準</div>
    <div class="small">我比較小</div>
</div>

CSS

#container {
    font-size: 20px;
}
.large {
    font-size: larger;
    /* You can also use: */
    /* font-size: 1.3em; */
    /* font-size: 130%; */
}
.small {
    font-size: smaller;
    /* You can also use: */
    /* font-size: 0.8em; */
    /* font-size: 80%; */
}
@media only screen and (max-width: 500px) {
    #container {
        font-size: 15px;
    }
}
@media only screen and (max-width: 300px) {
    #container {
        font-size: 10px;
    }
}