css - 当浏览器为 iPad 大小时，导航栏未换行，如何解决？

Question

我在一个网站上工作: sites.northwestern.edu/mrsec

当浏览器变为 iPad 大小(1024 像素)时，部分导航菜单位于菜单其余部分下方，并且出于某种原因它不包含在背景颜色中，字体为白色，因此人们无法看不到它。当浏览器变得足够小时，其余部分下方的菜单部分被相同的背景颜色(灰色)包裹，但在此之前，人们看不到其余部分下方的菜单部分菜单。我如何使用 CSS 或任何其他语言解决此问题？我使用的是 wordpress 模板，我无权访问 php 或模板文件，因为学校不允许我们访问。

Answer 1

您应该创建一个媒体查询来定位您想要的屏幕尺寸，然后添加一个样式来减少填充和字体大小，以便显示每个菜单项。

在您的情况下，它看起来像这样:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .main-navigation a{
        padding: 0 15px;
        font-size:14px;
    }
}

参见 this screenshot结果。