我有一个导航栏。当用户放大他们的屏幕时，我希望我的字体大小能够自动调整。我试过: li { font-size: 1.2vw;如果在调整屏幕后刷新页面，它会起作用。自动更新的代码是什么？我希望我的文本根据窗口宽度不断改变其大小。
<!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>
最佳答案
编辑:
这是一个 FIDDLE - 您可以调整页面大小并查看它是否正常工作。
查看此 css-tricks article :
这是一个 webkit 错误(Chrome、Safari)，在 IE10+ 和 FF 19+ 上不会出现
在那篇文章中作者给出了一个针对webkit浏览器的Jquery解决方案:
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);
});
所以你的页面看起来像这样:
<!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>
关于html - CSS:自动更新字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17715438/