Question

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>

Answer 1

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.