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

How to reposition things in a CCS media query

本文关键字：定位 新定位 CCS 媒体 查询      更新时间：2023-09-26

我有一个使用css媒体查询响应的导航菜单。当导航处于桌面/笔记本视图时，整个菜单工作正常。导航标签放置在笔记本电脑桌面视图下的图像，这就是我想要的，但当它在移动视图时，我需要导航标签和它里面的一切都被放置在一个img。我已经有一个css媒体查询设置与其他一些风格，但我想我需要一个javascript做我想要的。

希望有人能帮忙，

谢谢

下面是我对你的问题使用的媒体查询，

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

下面是的工作演示

所以为了解释我所做的，我有两个图像，一个id为desktopImg，另一个为mobileImg。desktopImg在nav标签上方，mobileImg在nav标签下方。使用媒体查询，我将mobileImg的display设置为桌面/笔记本电脑的none。类似地，对于移动视图，我通过将display设置为none

，使mobileImg可见，desktopImg不可见。
相关文章：