0

我一直在为我的大学开发以下网站：http: //www.ecu.edu/english/tpc并开发了您当前在访问时看到的布局。它在桌面上的浏览器中看起来不错，但我很难让它在较小的屏幕（如 iPhone）上变得灵活。我试图在几个地方调整最大宽度设置，但我没有运气。具体问题是顶部的两个水平菜单（在 HTML/CSS 中它们是导航和导航2）和右侧的内容（它们是侧边栏 div 中包含的 DT）似乎具有固定的大小，从而破坏了布局在较小的屏幕上。任何建议都非常感谢，完整的 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 的底部（呃！）

4

1 回答 1

0

我建议您查看媒体查询。

媒体查询并不是那么难用。您仍然拥有常规 CSS，并在底部添加： 

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

在花括号内，如果屏幕窄于 480 像素，您只需指定您想要的更改。

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

这会将所有段落文本更改为红色，只要您将浏览器窗口设置为小于 480 像素。当然，这是一个有点傻的例子。大多数时候你更关心width或关注display某些元素。

在您的情况下，您可能希望在这些情况下定位导航 div 并让它们表现不同，即：

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

请注意，以上可能不是您想要的。我只是做了一些虚拟的改变来展示什么是可能的。

于 2013-04-17T17:57:50.913 回答