Question

我仍然没有解决方案，任何人都可以帮助我，这一定很容易。我认为必须在javascript而不是媒体查询中找到解决方案，因为这对我没有用。

我有一个响应式导航，当屏幕小于1000px时显示nav-btn，但在使用nav-btn打开+关闭后，菜单项在调整屏幕宽度时消失，水平菜单项需要返回到位，但由于js菜单项消失了。

在调整屏幕大小时看到它，因此您看到4个菜单项水平内联，当小于1000px时，您会在打开和关闭后看到响应式菜单，并调整大于1000px的屏幕大小的4个菜单中的3个项目已消失。 / p>

$(function() {
$('.nav-btn').click(function(event) {
    $('nav ul').fadeToggle(300);
});
});

FIDDLE

Answer 1

我遇到了同样的问题并使用CSS @media anotation解决了问题：

@media screen and (max-width: 1000px) {
    // your needed style here
}

如果您有不同的尺寸/需求，请检查here。

重要：对我来说，当我们在屏幕尺寸上进行转换时，我需要定义所有尺寸以保持正确的行为，所以为了避免奇怪的事情，你必须定义如下内容：

@media screen and (min-width: 769px) {
    /* COMPUTER STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* TABLET STYLE HERE */
}

@media only screen and (max-device-width: 480px) {
    /* MOBILE PHONE STYLE HERE */
}

响应式导航在打开和关闭后消失，并调整为大屏幕

1 个答案: