leojg
leojg

Reputation: 1186

responsive layout text not resizing

I am trying to make a web with responsive web design but I cant make that the text resize when the browser window does. I am following the book "Responsive web design" of Ethan Marcotte

This is a segment of my stylesheet and html:

body {
font-size: 100%;
}
#nav-bar {
font-size: 1.0em;
}


<header>
    <div id="nav-bar">
        <nav>
            <ul>
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>
                <li><a href="">Item3</a></li>
            </ul>
        </nav>
   </div>
</header>

Upvotes: 0

Views: 4250

Answers (2)

Roger
Roger

Reputation: 11

These new properties allow you to scale font sizes according to the viewport dimensions, i.e.

1vw is 1% of the viewport width
1vh is 1% of the viewport height
1vmin is the smallest of 1vw and 1vh

For example, assume your browser viewport is set to 1,000 x 1,200 pixels:

1.5vw = 15px font size
1.5vh = 18px font size
1.5vmin = min(1.5vw, 1.5vh) = 15px font size

The new units will revolutionize responsive design —

Source: http://www.sitepoint.com/new-css3-relative-font-size/

Upvotes: 1

Ted
Ted

Reputation: 7251

You are looking to use css3 media queries. I.e. when browser width is < 980px, then change the font size to...

For example,

body {
     font-size: 100%;
}

#nav-bar {
     font-size: 1.0em;
}

@media (min-width: 980px) 
{ 
    #nav-bar { font-size: 2em } 
}

See http://cssmediaqueries.com/what-are-css-media-queries.html for a quick overview.

Upvotes: 1

Related Questions