CSS：自动更新字体大小 [英] CSS: Auto update font size
本文介绍了CSS：自动更新字体大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个导航栏。当用户使他们的屏幕更大，我想我的字体大小自动调整。我试过它：li {font-size：1.2vw; }如果页面在调整屏幕后刷新，它会工作。自动更新的代码是什么？我希望我的文字根据窗口宽度不断更改其大小。
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title>电源< / 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 {
location：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;颜色：＃3a3a3a; }
.navMenuItems ul li a：hover {color：＃F19433;}
< / style>
< / head>
< body>
< div id =page>
< img id =pageImgsrc =../ Navigation / backgroundImg.png/>
< div id =navBar>
< img id =navBarImgsrc =../ Navigation / navBarBGImg.png/>
< img id =navBarLogoImgsrc =../ Navigation / navLogoImg.png/>
< / div>
< div id ='navMenuPart1'class =navMenuItems>
< ul>
< li>< a href ='＃'>< span>研究< / span>< / a>< / li&
< li>< a href ='＃'>< span>团队< / span>< / a>< / li&
< li>< a href ='＃'>< span>新闻< / span>< / a>< / li&
< li>< a href ='＃'>< span>课程< / span>< / a>< / li&
< li>< a href ='＃'>< span>外联< / span>< / a>< / li&
< li>< a href ='＃'>< span>联系人< / 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>
解决方案
EDIT： p>
以下是 FIDDLE - 您可以调整页面大小并查看页面是否有效。
查看此 css-tricks文章：
这是一个webkit
在这篇文章中，作者为webkit浏览器提供了一个Jquery解决方案：
要解决这个问题（允许调整大小而不刷新页面），你需要
导致元素上的重绘。我使用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>演示< / 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>
...等等。
< / body>
< / html>
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>
解决方案
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>
这篇关于CSS：自动更新字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
