动态更改字体大小

Question

这是我当前的代码，但正如您所见，每当字体大小更改时，都会调整浏览器宽度的大小。悬停效果不是字体大小的1.5倍，如何使悬停效果动态获取文本的当前字体大小并相应地加倍（1.5x）？

----＆GT; https://jsfiddle.net/054yzoux/＆lt; ---------

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 （对于所有视口分辨率始终相同），提供vw值也是大于4vw所以可能 5vw （这确保在悬停时，新的字体大小将始终大于正常的字体大小，因为 5vw> 4vw 适用于所有视口分辨率）并且工作正常。
• 需要注意的另一点是转换应该在元素的默认状态中提供，而不是在定义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

如果你想在悬停时加倍字体大小，你应该使用＆＃39; em＆＃39;初始和悬停状态的单位。

以下代码可以使用：

.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*/
    ...
}

这是demo。