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

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/

Answer 2

您正在寻找使用 css3 媒体查询。即当浏览器宽度 < 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。