試圖修復與網站基於CSS的佈局問題

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) { 
    ... 
} 

花括號內，如果屏幕比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; 
    } 
} 

注意，上面可能不是你想要的。我只是做了一些虛擬變化，以顯示什麼是可能的。