Making font-size smaller on smaller screen-widths

1

Hello Camp, Im trying to make a responsive website that can do this… I want to make everything smaller as the screen size is reduced. When screen size is reduced instead of the navbar links stacking on top of each other or forming them into a menu button . I want the navbar links(and icon image) to reduce font size as the screen width is reduced.(Keeping space between Left,Center,Right links) My goal is to make it look exactly the same on 320px width screen as on a full screen, only smaller. Here is my test site. Any ideas or links will be much appreciated!
http://codepen.io/russell305/pen/gLyjjM?editors=1100

2 
@media screen and (max-width: 320px){
    body {
        font-size: 10px }}

As soon as screen is 320px wide or less all your fonts will be resitzed to 10px, if you want only specific item to do this just replace body with its class.

3

What @Freak0ut said is good, but there is an easier way than manually changing the font-size with media queries. You can set the font-size with percentage based units, and you should not have to manually change them for various screen sizes, ex:

p {
    font-size: 1vmin;
}

...

p {
    font-size: 10%;
}

...

p {
    font-size: 1.5em;
}

vw.gif758×385 400 KB

CSS Tricks

em vs viewport units

2 Likes
4

Awesome! Thank you for the knowledge, i am going with the font-size: 10%; So simple. I had everything fixed font-size 25px.

1 Like
5

Good point! Totally forgot about these lol.

1 Like