Javascript 旋转手机时如何刷新div（从纵向到横向，反之亦然） 我把一个导航菜单分成两个（左和右），中间有一个隐藏/显示导航切换按钮。

导航条接缝的行为符合我的要求。但当我用手机检查并将设备从纵向旋转到横向时，或者反之亦然。导航没有回应。即导航中的菜单超出屏幕或位于错误的位置。 我通过媒体查询解决了这个问题 但我在媒体查询中的代码（宽度：100%）与其他地方的样式表中的代码完全相同。它与我使用的最大宽度无关

至少不是为了让导航正常运行。我的第一个想法是在没有任何媒体查询的情况下创建一个响应性网站。我在早期阶段失败了：）） 它就像现在，当我有一个媒体查询，浏览器去检查屏幕的宽度，如果它改变，或类似的事情

对不起，我的介绍太长了。。现在我需要你的帮助

• 我使用的媒体查询是否有问题
• 你有电话吗 提供选择权
• 你建议的宽度是多少？这无关紧要吗

请检查我的代码： CSS

HTML和JS

<script>
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        e.classList.toggle('hidden');
    }
</script>

<div class="center">
    <div class="navtog"> 
        <a onclick="toggle_visibility('navbar');" style="cursor:pointer;">
            <img src="img/toggle.png" />
        </a>
    </div>
</div>

<div id="navbar" class="hidden nav">
    <div class="nav_r">navigation items Right</div>
    <div class="nav_l">navigation items Left</div>
</div>

功能切换\u可见性（id）{
var e=document.getElementById（id）；
e、 切换（'hidden'）；
}
导航项目对吗
左侧导航项目

事实上，您的媒体查询适用于最大2767px的所有屏幕大小（基本上适用于所有屏幕）。移动优先方法中的媒体查询通常包括

minwidth

，因此在非常小的尺寸下会发生不同的事情，而在较大的平板电脑尺寸下会发生不同的事情。试试这个：

@media only screen and (min-width: 500px) {
    ...

---

您可能需要反转更多的显示属性以使其按预期工作，但断点通常应位于纵向和横向宽度之间。

我也使用

我的代码接缝来工作，无论我在查询中使用什么宽度。它是用来让浏览器在打开设备屏幕时刷新div的。我知道我解释的语法很糟糕。很抱歉。我想有一个选择的方式。而不是媒体查询媒体查询是正确的方法。没有必要“刷新”任何内容。好的。谢谢你抽出时间。我很感激。对不起打扰了。我认为这些媒体查询会使网站速度变慢。。。

@media only screen and (min-width: 500px) {
    ...