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：自動更新字體大小

回答

相關問題