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媒体查询。即当浏览器宽度为＆lt; 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以获取快速概述。

Answer 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/

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

2 个答案: