CODEWITHSUNDEEP
csstwitter-bootstrap
user3745236
user3745236

Reputation: 95

Is there a way to adjust font size by screen width in twitter bootstrap?

I've seen a lot of posts on how to adjust font-size using media queries for different devices. But is there is way to make the font bigger or smaller solely based on how wide your screen is? So if you shrink your browser window to the narrowest possible width, the font size would be small but font size would be big if you maximize your window.

Upvotes: 1

Views: 1567

Answers (2)

dewaz
dewaz

Reputation: 147

Rather than using an additional library, I prefer using: viewport, media query, and a font size that is adjusted based on the screen size.

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

The css:

@media(max-width:767px){
    .image-thumbnail > p{
        font-size: 3.0vw;
    }
}

CSS-Tricks has more about this technique: Viewport Sized Typography

Upvotes: 1

arshad
arshad

Reputation: 893

Take a look at

Flowtype.js

It will make your font responsive.

Upvotes: 0

Related Questions