html - 响应式布局文本不调整大小

Question

我正在尝试制作一个具有响应式网页设计的网页，但我无法让文本在浏览器窗口调整大小时调整大小。我正在关注 Ethan Marcotte 的《响应式网页设计》一书

这是我的样式表和 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

您希望使用 css3 媒体查询。 IE。当浏览器宽度 < 980px 时，将字体大小更改为...

例如，

body {
     font-size: 100%;
}

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

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

参见 http://cssmediaqueries.com/what-are-css-media-queries.html快速概览。