gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:05:12 25 4
gpt4 key购买 nike

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

关于javascript - 如何在 CCS 媒体查询中重新定位事物,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32996848/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com