旋转移动设备时如何使div刷新（纵向到横向，反之亦然）

Question

我将导航菜单分为两部分（左侧和右侧），中间有一个隐藏/显示导航切换按钮。

导航栏接缝的行为就像我想要的那样。但是当我检查手机并将设备从纵向旋转到横向时，反之亦然。导航没有回应。即导航中的菜单会出现在屏幕之外，否则会出现在错误的位置。 我确实通过媒体查询解决了这个问题 但是我在媒体查询中的代码（宽度：100%）与其他地方的样式表中的代码完全相同。 我使用什么最大宽度并不重要。

至少导航不能正常运行。我的第一个想法是制作一个完全没有任何媒体查询的响应式网站。我在早期失败了:)) 就像现在当我有一个媒体查询时，浏览器会去检查屏幕的宽度是否发生变化，或者类似的事情。

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

• 我使用的媒体查询可能有问题吗？
• 你有一个 提供的选项？
• 你推荐什么宽度还是没关系？

请检查我的代码： CSS

@media only screen and (max-width: 2767px) {
    .nav {
        width:100%;
    }
    .hidden {
        display:none;
    }
    .normal {
        display:block;
    }
    .center {
        margin: 0 auto;
    }
    .navtog {
        position:fixed;
        z-index:1500;
        left:50%;
        top:25px;
        transform:translate(-50%, -50%);
    }
    .nav {
        font: 120% oswald;
        color:#fff;
        position:fixed;
        width:100%;
        background-color: rgba(0, 0, 0, 0.29);
        z-index:1050;
        margin: 0 auto;
    }
    .nav_r {
        text-align:right;
        padding-right:10%;
    }
    .nav_l {
        padding-left:10%;
        position:absolute;
        top:0;

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>

Answer 1

事实上，您的媒体查询适用于不超过 2767 像素的所有屏幕尺寸（基本上全部）。移动优先方法中的媒体查询通常包含min-width，因此在非常小的尺寸与较大的平板电脑尺寸会发生不同的事情。试试这个：

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

Demo

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