Reputation: 1186
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>
Upvotes: 0
Views: 4250
Reputation: 11
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/
Upvotes: 1
Reputation: 7251
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.
Upvotes: 1