响应式布局文本未调整大小答案

【问题标题】：responsive layout text not resizing响应式布局文本未调整大小
【发布时间】：2013-12-30 07:01:11
【问题描述】：

我正在尝试使用响应式网页设计制作网页，但我无法在浏览器窗口时调整文本大小。我正在关注 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>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

您希望使用 css3 媒体查询。 IE。当浏览器宽度为

例如，

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 了解快速概览。

【讨论】：

是的，这是一个解决方案。但我正在寻找更“平滑”的东西，我正在尝试在窗口调整字体大小的同时调整字体大小。我设法用img做到了，但由于某种原因我不能用文字:(

【解决方案2】：

这些新属性允许您根据视口尺寸缩放字体大小，即

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

例如，假设您的浏览器视口设置为 1,000 x 1,200 像素：

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

新单元将彻底改变响应式设计 —

来源：http://www.sitepoint.com/new-css3-relative-font-size/

【讨论】：