Question

我有一个使用css媒体查询响应的导航菜单。导航在桌面/笔记本电脑视图中时，整个菜单工作正常。导航标签被放置在笔记本电脑桌面视图中的图像下，这是我想要的但是当它在移动视图中时，我需要导航标签及其内部的所有内容都放在img上。我已经有一个css媒体查询设置与其他一些样式但我认为我需要一个JavaScript来做我想要的。

希望有人能提供帮助，

由于

Answer 1

以下是我用于您的问题的媒体查询，

#mobileImg{
    display:none;
}
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #desktopImg{
        display:none;
    }
    #mobileImg{
        display:block;
    }
}

以下是working demo

为了解释我的所作所为，我有两张图片，其中一张ID为desktopImg，另一张为mobileImg。 desktopImg位于nav标记之上，mobileImg位于nav标记之下。使用媒体查询，我为桌面/笔记本电脑设置display mobileImg为none。同样，对于移动视图，我将mobileImg视为desktopImg

，使display可见而none不可见

如何在CCS媒体查询中重新定位事物

1 个答案: