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

Question

我有一个导航菜单，它使用 CSS 媒体查询进行响应。当导航在台式机/笔记本电脑 View 中时，整个菜单都可以正常工作。导航标签放置在笔记本电脑桌面 View 中的图像下方，这是我想要的，但是当它处于移动 View 中时，我需要导航标签及其内部的所有内容放置在 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适用于台式机/笔记本电脑。同样对于移动 View ，我做了 mobileImg可见和 desktopImg通过使其 display 不可见作为none