CODEWITHSUNDEEP
htmlcss
BDGapps
BDGapps

Reputation: 3356

CSS: Auto update font size

I have a nav bar. When the user makes their screen bigger I want my font size to auto adjust. I tried it with: li { font-size: 1.2vw; } It works if the page is refreshed after adjusting the screen. What would be the code for an auto update? I want my text to constantly change its size based on the window width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Power</title>
<style type="text/css">


#page {
    position:inherit;
    display:block;
    width:60%;
    margin:auto;
    min-width:1000px;
    z-index:0;  
}
#pageImg {
    position:absolute;
    width:60%;
    min-width:1000px;
    z-index:1;
}
@media (min-width: 1000px) {
#navBarImg {
    top: 5vw;
}
#navBarLogoImg {
    top: 5vw;

}
#navMenuPart1 {
    top: 5vw;
left:60%;
}
}
#navBarImg {
    position:absolute;
    width:60%;
    min-width:1000px;
top:50px;
    z-index:2;
}
#navBarLogoImg {
    position:absolute;
    width:11.75%;
    min-width:190px;

top:50px;
    z-index:3;
}
#navMenuPart1{
    position:absolute;
    width:100%;
    min-width:1000px;
    left:20px;
  top:50px;
    z-index:3;
    color: #FFFFFF; 
}
li { font-size: 1.2vw; }
ul{ white-space: nowrap; }
.navMenuItems ul { list-style:none; text-align:center; padding:10px 0; }
.navMenuItems ul li { display:inline; padding:15px; letter-spacing:2px; }
.navMenuItems ul li a { text-decoration:none; color:#3a3a3a; }
.navMenuItems ul li a:hover {color:#F19433;}

</style>

</head>
<body>
<div id="page">
    <img id="pageImg" src="../Navigation/backgroundImg.png" />
    <div id="navBar">
        <img id="navBarImg" src="../Navigation/navBarBGImg.png" />
        <img id="navBarLogoImg" src="../Navigation/navLogoImg.png" />
    </div>
    <div id='navMenuPart1' class="navMenuItems">
        <ul>
            <li><a href='#'><span>Research</span></a></li>
            <li><a href='#'><span>Team</span></a></li>
            <li><a href='#'><span>News</span></a></li>
            <li><a href='#'><span>Courses</span></a></li>
            <li><a href='#'><span>Outreach</span></a></li>
            <li><a href='#'><span>Contact</span></a></li>
        </ul>
    </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

       causeRepaintsOn = $("li");

        $(window).resize(function() {
         causeRepaintsOn.css("z-index", 1);
       });

    </script>
    <header></header>
</div>
</body>
</html>

Upvotes: 0

Views: 1488

Answers (3)

Danield
Danield

Reputation: 125463

EDIT:

Here is a FIDDLE - you can resize the page and see that it is working.

See this css-tricks article:

This is a webkit bug (Chrome,Safari) and it doesn't occur on IE10+ and FF 19+

In that article the author gives a Jquery solution for webkit browsers:

To fix this issue (allow resizing without page refresh) you need to cause a "repaint" on the element. I used jQuery and just fiddled with each elements (irrelevant, in this case) z-index value, which triggers the repaint.

causeRepaintsOn = $("h1, h2, h3, p");

$(window).resize(function() {
  causeRepaintsOn.css("z-index", 1);
});

So your page will look something like this:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

       causeRepaintsOn = $("li");

        $(window).resize(function() {
         causeRepaintsOn.css("z-index", 1);
       });

    </script>
    <header></header>
    ... etc etc..
</body>
</html>

Upvotes: 4

Michael Unterthurner
Michael Unterthurner

Reputation: 941

If you have a css like this:

#body #mytext {
   font-size: 50%;
}

you can dynamically resize in jQuery like this:

$(window).resize(function(){
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});

Upvotes: 0

Sudip
Sudip

Reputation: 2051

Use,

font-size:1em;

or

font-size:100%; // based on body default declaration

Upvotes: 0

Related Questions