Html CSS：自动更新字体大小_Html_Css

Html CSS：自动更新字体大小

html css

Html CSS：自动更新字体大小,html,css,Html,Css,我有导航条。当用户的屏幕变大时，我希望我的字体大小能够自动调整。我尝试了：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=

我有导航条。当用户的屏幕变大时，我希望我的字体大小能够自动调整。我尝试了：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>


权力
#页面{
职位：继承；
显示：块；
宽度：60%；
保证金：自动；
最小宽度：1000px；
z指数：0；
}
#pageImg{
位置：绝对位置；
宽度：60%；
最小宽度：1000px；
z指数：1；
}
@介质（最小宽度：1000px）{
#纳巴林格{
top:5vw；
}
#导航条码{
top:5vw；
}
#导航部件1{
top:5vw；
左：60%；
}
}
#纳巴林格{
位置：绝对位置；
宽度：60%；
最小宽度：1000px；
顶部：50px；
z指数：2；
}
#导航条码{
位置：绝对位置；
宽度：11.75%；
最小宽度：190px；
顶部：50px；
z指数：3；
}
#导航部件1{
位置：绝对位置；
宽度：100%；
最小宽度：1000px；
左：20px；
顶部：50px；
z指数：3；
颜色：#FFFFFF；
}
li{字体大小：1.2vw；}
ul{空白：nowrap；}
.navMenuItems ul{列表样式：无；文本对齐：居中；填充：10px 0；}
.navMenuItems ul li{显示：内联；填充：15px；字母间距：2px；}
.navMenuItems ul li a{文本装饰：无；颜色：#3a3a3a；}
navMenuItems ul li a:悬停{颜色：#F19433；}








causeRepaintsOn=$（“li”）；
$（窗口）。调整大小（函数（）{
css（“z指数”，1）；
});

使用

或

使用

或

编辑：

这是一个-您可以调整页面大小，并查看它是否正常工作

见此：

这是一个webkit错误（Chrome、Safari），它不会出现在IE10+和FF 19上+

在这篇文章中，作者为webkit浏览器提供了一个Jquery解决方案：

要解决此问题（允许在不刷新页面的情况下调整大小），您需要在元素上导致“重新绘制”。我使用jQuery，只是摆弄一下每个元素（在本例中不相关）的z索引值重新油漆

因此，您的页面将如下所示：

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

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

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


演示
causeRepaintsOn=$（“li”）；
$（窗口）。调整大小（函数（）{
css（“z指数”，1）；
});
... 等等。。

编辑：

这是一个-您可以调整页面大小，并查看它是否正常工作

见此：

这是一个webkit错误（Chrome、Safari），它不会出现在IE10+和FF 19上+

在这篇文章中，作者为webkit浏览器提供了一个Jquery解决方案：

因此，您的页面将如下所示：

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

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

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


演示
causeRepaintsOn=$（“li”）；
$（窗口）。调整大小（函数（）{
css（“z指数”，1）；
});
... 等等。。

如果您有这样的css：

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

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

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

您可以在jQuery中动态调整大小，如下所示：

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

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

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

如果您有这样的css：

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

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

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

您可以在jQuery中动态调整大小，如下所示：

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

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

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

我怎么把它放在我的html/CSW中你为什么有两个头？头不是头。。但是您可以忽略这一部分-我想告诉您如何加载jquery@BDGapps我添加了一个fiddle，我正在运行safari 6.0.3，它不会在我的页面上调整大小。它在Fiddle中起作用。我如何将其放在我的html/CSW中？为什么有两个标题？标题不是标题。。但是您可以忽略这一部分-我想告诉您如何加载jquery@BDGapps我添加了一个fiddle，我正在运行safari 6.0.3，它不会在我的页面上调整大小。在Fiddle中，我如何将其添加到代码中。看看我上面的代码。我试着把它放进去，但做得不对。你应该在你的头脑中在脚本标签中添加这个函数，在样式中添加css。我如何将它添加到我的代码中。看看我上面的代码。我试着把它放进去，但弄错了。你应该把这个函数放在一个脚本标记中，把css放在样式中。如果我说得对，你必须在脚本标记中添加type

type=“text/javascript

，否则它无效。如果我说得对，你必须在脚本标记中添加type

type=“text/javascript

，否则它无效。