javascript - 如何在CCS媒体查询中重新放置内容

我有一个导航菜单，该菜单使用CSS媒体查询进行响应。在桌面/笔记本电脑视图中导航时，整个菜单都可以正常工作。导航标签位于笔记本电脑桌面视图中的图像下方，这是我想要的方式，但是当它处于移动视图时，我需要将导航标签及其中的所有内容放置在img上。我已经有一个CSS媒体查询设置，其中包含其他样式，但是我想我需要一个JavaScript来完成我想要的事情。

希望有人能帮忙

谢谢

最佳答案

以下是我用来回答您的问题的媒体查询，

#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不可见。