How to use bootstrap for font sizes?

Question

I would like a didactic answer on how to use Bootstrap to determine font sizes. To help, I am using exactly the following medias-queries:

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 480px) {

}

From what I understand, one should give a base size to transform px in em but to continue my work and my learning, I would like to be sure how to use this.

Answer 1

Like you said, the measure em is a relative measure, i.e., it is calculated from a fixed value "base". Thus, you could make the following code:

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    body{
        font-size:15px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    body{
        font-size:25px;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    body{
        font-size:50px;
    }
}

And every time you assigned the property font-size: [n]em (where [n] can be any value float > 0) for some element, it would have the font size according to the current media-query.

Example: FIDDLE