CSS：自动更新字体大小

我有一个导航栏。当用户使他们的屏幕变大时，我想让我的字体大小自动调整。我尝试过：li {font-size：1.2vw; }如果在调整屏幕后刷新页面，它将起作用。什么是自动更新的代码？我希望我的文本能够根据窗口宽度不断改变其大小。CSS：自动更新字体大小

<!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>

来源

2013-07-18 BDGapps

如果我没错，你必须在脚本标签中添加'type =“text/javascript'类型，否则它是无效的。 –

使用，

font-size:1em;

或

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

来源

2013-07-18 05:50:54

都没有工作 – BDGapps

编辑：

这里是一个FIDDLE - 你可以调整网页，看看它是否工作。

看到这个css-tricks article：

这是一个错误的WebKit（Chrome浏览器，Safari浏览器），它不会对IE10 +发生和FF 19+

在这篇文章中笔者给出一个jQuery解决方案针对WebKit浏览器：

要解决这个问题（允许调整不刷新页面），你需要事业的元素“重绘”。我使用了jQuery，并且只用弄乱了每个元素（在本例中不相关）z-index值，这会触发的重绘。

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

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

所以你的页面看起来就像这样：

<!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>

来源

2013-07-18 05:54:10 Danield

我该如何把这个在我的html/css – BDGapps

@ BDGapps看我的编辑 – Danield

为什么你有2个头？ – BDGapps

如果你有一个这样的CSS：

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

你可以在jQuery的动态调整是这样的：

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

来源

2013-07-18 06:42:31

我将如何添加到我的代码。看看我上面的代码。我试图把它放进去，但是做错了。 – BDGapps

你应该在脚本标记中添加此函数，并在样式中添加CSS。 –

CSS：自动更新字体大小

回答

相关问题