时间戳

首页 > 解决方案 > 当我在手机上查看我的网站时，媒体查询无法正常工作

html - 当我在手机上查看我的网站时，媒体查询无法正常工作

问题描述

您好，我有一个用于移动设备的导航菜单和一个用于普通电脑屏幕的导航菜单。当窗口宽度减小时，它会摆脱桌面菜单并显示移动菜单。当我缩小窗口时，这适用于 chrome，但是当我通过手机查看我的网站时，菜单没有显示。我<meta name="viewport" content="width=device-width, initial-scale=1.0">在<head>标签中有。

下面提供的代码。

<div class="mobilemenu">
    <a href="#">link 1</a>
    <a href="#">link 2</a>
</div>

<div class="desktopmenu">
    <a href="#">link 1</a>
    <a href="#">link 2</a>
</div>

这是CSS

.desktopmenu {
   display: block;
}

.mobilemenu {
    display: none;
}

@media screen and (max-width: 450px){
    .desktopmenu {
        display: none;
    }

    .mobilemenu {
        margin-top: -46px !important; /* this is because of the wordpress header */
        top: 0;
        display: block;
        overflow: hidden;
        background-color: #333;
        position: relative;
        border-bottom: 1px solid darkgray;
    }

}

标签： htmlcss

解决方案

这是因为您设置margin-top: -46px了并且您的菜单退出了body。

推荐阅读