Question

我一直在为我的大学开设以下网站：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的底部（呃！）

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;
    }
}

注意，以上可能不是你想要的。我只是进行了一些虚拟更改以显示可能的内容。

试图通过网站修复基于CSS的布局问题

1 个答案: