尝试修复基于CSS的网站布局问题

Question

我一直在为我的大学开发以下网站：http://www.ecu.edu/english/tpc，并开发了您当前访问它时看到的布局。它在桌面上的浏览器上看起来都不错，但我很难让它在小屏幕(比如iPhone)上变得灵活。我曾尝试在几个地方调整最大宽度设置，但一直没有成功。具体的问题是，顶部的两个水平菜单(在HTML/CSS中分别是导航和navigation2)和右边的内容(它们是侧边栏div中包含的at )似乎具有固定的大小，从而破坏了较小屏幕上的布局。非常感谢任何建议，完整的CSS可以在这里找到：http://jsfiddle.net/dSPdB/

/* -------- Horizontal Navigation -------- */

#navigation {
    float: left;
    margin: .5em 0 0 0;
    position: relative;
    padding: .5em 0;
    text-transform: uppercase;
    background-color: #592a8a;
}

#navigation ul {
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

#navigation li {
    font-family: 'Noto Sans', sans-serif;
    display: inline;
    list-style: none;
    display: block;
    float: left;
    width: 11em;
    max-height: 2em;
    text-align: center;
    padding: .5em 0 0 0;
}

#navigation li:first-child {
    border-left: 0;
}

#navigation li:last-child {
    border-right: 0;
}

#navigation li a {
    color: #fff;
    text-decoration: none;
}

#navigation li a:hover {
    color: #fff;
    border: 0;
    text-decoration: underline;
}
/* --------------------------------------- */
/* -------- Navigation 2 -------- */

#navigation2 {
    float: left;
    margin: 0 0 0 0;
    position: relative;
    padding-left: 5.4em;
    text-transform: uppercase;
}

#navigation2 ul {
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

#navigation2 li {
    font-weight: bold;
    display: inline;
    list-style: none;
    display: block;
    float: left;
    max-width: 3em;
    max-height: 2em;
    text-align: center;
    padding: .5em 0 0 0;
    margin-right: 1em;
}

#navigation2 li:first-child {
    border-left: 0;
}

#navigation2 li:last-child {
    margin-right: 0;
}

#navigation2 li a {
    color: #fff;
    text-decoration: none;
}

#navigation2 li a:hover {
    color: #fff;
    border: 0;
    text-decoration: underline;
}
/* --------------------------------------- */

不用担心媒体查询不起作用，我没有把它放在CSS的底部(讨厌！)

Answer 1

我建议你调查一下媒体查询。

媒体查询并不是很难使用。您仍然使用常规CSS，并在底部添加以下内容：

@media only screen and (max-device-width: 480px) {
    ...
}

在大括号内，如果屏幕小于480px，则只指定所需的更改。

@media only screen and (max-device-width: 480px) {
    p {
        color: red;
    }
}

这将更改所有段落文本为红色，只要你使你的浏览器窗口缩小到480px。当然，这是一个有点愚蠢的例子。大多数情况下，您更关心某些元素的width或display。

在您的情况下，您可能希望在这些情况下以导航div为目标，并让它们具有不同的行为，即：

@media only screen and (max-device-width: 480px) {
    #navigation2 {
        float: none;
        clear: both;
    }
}

请注意，以上内容可能不是您想要的。我只是做了一些虚拟的更改，以显示什么是可能的。