当浏览器为 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的结果。