Bootstrap Responsive Text Size

Question

I am trying to build a responsive layout using bootstrap and currently am defining some of the titles with font-size:3em;

But when the layout is shrunk down this is too big. How can I responsively reduce the size of the text?

Answer 1

Simplest way is to use dimensions in % or em. Just change the base font size everything will change.

Less

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4rem;
}       

Look at all the ways at https://stackoverflow.com/a/21981859/406659

You could use viewport units (vh,vw...) but they dont work on Android < 4.4