如何在 CCS 媒体查询中重新定位内容

【问题标题】：How to reposition things in a CCS media query如何在 CCS 媒体查询中重新定位内容
【发布时间】：2023-03-18 09:58:02
【问题描述】：

我有一个使用 css 媒体查询进行响应的导航菜单。当导航在桌面/笔记本电脑视图中时，整个菜单工作正常。导航标签放置在笔记本电脑桌面视图中的图像下方，这是我想要的，但是当它在移动视图中时，我需要将导航标签和其中的所有内容放置在 img 附近。我已经有一个 css 媒体查询设置，其中包含一些其他样式，但我认为我需要一个 javascript 来做我想做的事。

希望有人能帮忙，

谢谢

【问题讨论】：

你能创建一个代码 sn-p 或 JS Fiddle 到目前为止你有什么？
结果看起来不正确，但它显示了我的代码
你有 JS Fiddle 的链接吗？
哦，是的，对不起jsfiddle.net/d26g0785
那么，在移动端视图中，您想要红色菜单在哪里？

标签： javascript jquery html css media-queries

【解决方案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 标签下方。使用媒体查询，我将mobileImg 的display 设置为台式机/笔记本电脑的none。同样对于移动视图，我通过将 display 设置为 none 来使 mobileImg 可见和 desktopImg 不可见

【讨论】：