動態更改字體大小

Question

這是我當前的代碼，但是正如您所看到的，每當字體大小發生變化時，瀏覽器寬度的大小都會改變。 懸停效果不是字體大小的1.5倍，如何使懸停效果動態地獲取文本的當前字體大小並將其相應地加倍（1.5x）？

----> https://jsfiddle.net/054yzoux/ <---------

html

    <nav class="navbar-menu">
    <ul id="list" class="test">
        <li id="emph nav-home">Home</li>
        <li id="nav-portfolio">Portfolie</li>
        <li id="nav-skills">Færdigheder</li>
        <li id="nav-erfaring">Erfaring</li>
        <li id="nav-kontakt">Kontakt mig</li>
    </ul>
</nav>

的CSS

.navbar-menu ul li{
    display: block;
    font-size: 4vw;
    margin-top: 5%;
}

.navbar-menu ul li:hover{
    color: #fff;
    transform: translateX(3%);
    background-color: #888888;
    transition-duration: 0.3s;
    font-size: 2em;
}

問題要查看問題所在，請在jsfiddle中將瀏覽器寬度增加並懸停在文本上方。 如您所見，文字減少而不是增加50％

Answer 1

出現此問題的原因是，對於固定視圖， 也許4vw小於懸停時的2em ，這就是放大字體的原因，但是對於較大視圖，則2em小於4vw是這就是毛刺效果的原因。

• 而不是2em （ 對於所有視口分辨率始終是相同的 ） ，還應提供一個大於4vw 的vw值 ，因此也可以提供5vw （這可以確保在懸停時，新的字體大小將始終大於正常字體-大小，因為所有視口分辨率的5vw> 4vw都可以） 。
• 要注意的另一點是，應在element的默認狀態下提供過渡 ，而不是在定義CSS選擇器時提供。 這樣可以確保它會在懸停發生和取出時發生。

 .navbar-menu ul li{ display: block; font-size: 4vw; margin-top: 5%; transition:all 0.3s; } .navbar-menu ul li:hover{ color: #fff; transform: translateX(3%); background-color: #888888; font-size: 5vw; } 

 <nav class="navbar-menu"> <ul id="list" class="test"> <li id="emph nav-home">Home</li> <li id="nav-portfolio">Portfolie</li> <li id="nav-skills">Færdigheder</li> <li id="nav-erfaring">Erfaring</li> <li id="nav-kontakt">Kontakt mig</li> </ul> </nav> 

Answer 2

如果要在懸停時將字體大小加倍，則應將“ em”單位用於初始狀態和懸停狀態。

以下代碼將起作用：

.navbar-menu ul li{
display: block;
font-size: 3em;
margin-top: 5%;}

.navbar-menu ul li:hover{
color: #fff;
transform: translateX(3%);
background-color: #888888;
transition-duration: 0.3s;
font-size: 4em;}

Answer 3

由於您使用的是動畫（變換），因此最好使用相同的單位以獲得更准確的結果。

.navbar-menu ul li{
    ...
    font-size: 4vw;
    ...
}

.navbar-menu ul li:hover{
    ...
    font-size: 6vw;/* will give 50% enlarge effect*/
    ...
}

這是一個演示 。