使用导航栏中的图标缩放问题

Question

我使用materialize.css在导航栏中显示图标。当窗口低于某个阈值时，所有图标都会移到顶部。 如何在不在小屏幕上隐藏图标的情况下防止这种移动？

Fiddle。注意当帧的大小小于600px时，图标如何向上移动。

setjdk jdk1.8.0_60.jdk

Answer 1

您可以修复图标的线高。见小提琴。

http://jsfiddle.net/b6naew9h/16/

.material-icons {
    line-height: 56px;
}

Answer 2

您的代码中使用了

CSS Media Queries（ghpages-materialize.css），这意味着不同的屏幕（或窗口）尺寸有不同的样式：

nav {
    color: #fff;
    background-color: #ee6e73;
    width: 100%;
    height: 56px;
    line-height: 56px;
}

@media only screen and (min-width: 601px)
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
    height: 64px;
    line-height: 64px;
}

您可以通过修复每种屏幕尺寸的样式来防止这种移动。 Chrome开发者工具可以帮助您解决此问题。

您可以将其添加到CSS文件中以修复它（适用于所有媒体）：

nav {
    height: 64px;
    line-height: 64px;
}

i.material-icons.left {
    line-height: 64px;
}