Question

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

导航栏接缝表现得像我想要的那样。但是当我用手机检查并将设备从纵向旋转到横向时，反之亦然。导航没有回复。即导航中的菜单出现在屏幕外或其他地方。 我确实通过媒体查询解决了这个问题 但是我在媒体查询中的代码（宽度：100％）与其他地方的样式表完全相同。并且与我使用的最大宽度无关。

至少不是导航行为正确。我的第一个想法是创建一个没有任何媒体查询的代理网站。我在早期失败:)）当我有媒体查询时，它会像现在一样接缝，浏览器会检查屏幕的宽度（如果它是chaanges），或类似的东西。

很抱歉很长时间的介绍..现在我需要你的帮助

我使用的媒体查询可能会出现问题吗？
你有吗？提供选项？
你推荐什么宽度或无关紧要？

请检查我的代码： 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

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

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

1 个答案: