css - 在响应式版本中排除菜单背景图片

Question

我在 wordpress 网站上工作，想使用自定义 CSS 在我的菜单后面添加背景图片？并想知道如何向菜单添加分隔线，以便在菜单上的每个链接项后自动生成一个分隔线？

我做的是

.menu{
  background-image: url("abolutepath/header-navigation-bar-bg.png"); 
 }

---

它工作，菜单和背景显示，但问题是 a。菜单背景的 flex 端没有显示在右侧，因为菜单在中途结束，我想显示整个背景图像，就像菜单 b 下一样。在移动设备上，菜单重复并且显示全部错误，那么有没有一种方法可以在一个 css 代码块中从菜单/网站的响应版本中排除此背景图像和分隔线？

求助，谢谢

Answer 1

您可以使用媒体查询根据设备屏幕尺寸自定义 css

@media screen and (max-device-width: 480px) {
    .menu{
        // CSS for mobile device or small screen size
        background-image: url("abolutepath/header-navigation-bar-bg.png"); 
    }
}

@media screen and (min-device-width: 480px) and (max-device-width: 960px) {
    .menu{
        // CSS for other device
    }
}