html - 我怎样才能让这个图标菜单在设备上看起来像在桌面上一样好看

Question

我有这个图标菜单，在桌面 View 中看起来很不错，请在此处查看。

http://www81.myfantasyleague.com/2016/home/53558#0

但是一旦你移动到 ipad 1024px 及以下的移动设备，菜单就会变得拥挤并减少到 2 行，我想保持在同一行，但也许将设备上的每个图标都拉近以避免这种情况。

所以我认为媒体查询的调用是相同的，但我无法让它工作。

为该区域编写内联 html 代码

#nav li {
    vertical-align:top;
    display:inline-block;
    margin:0 auto;
    text-align:center;
    width:135px;          /*** ADJUST THIS WIDTH SO IMAGES FILL TEMPLATE WIDTH ****/

还有我的媒体代码

@media only screen and (max-width: 1024px) {
#nav li {
    vertical-align:top;
    display:inline-block;
    margin:0 auto;
    text-align:center;
    width:95px;}}

所以我将 PX 更改为 95 以使它们在媒体设备上更接近……但它没有生效。我看到它更喜欢调用 #nav ul 但对我来说不是同一个区域，一旦我在 #nav li 的位置尝试这个 #nav ul，它移动但仍然不安静。

如果这不是媒体呼吁响应的正确方式，请随时更改此 100%。

难倒...请帮助 谢谢

Answer 1

尝试

#nav li {
    width: 135px;
}

到

#nav li {
    width: 10%;
}