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

Question

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

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%;
}

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

How can i get this icon menu to look good on devices as it does on desktop

html

css

device

media-queries