網站沒有調整到較小的屏幕尺寸，因爲它應該

我會在這裏放下一些代碼，但我認爲最好只是給你的網址。發生了什麼事情是該網站對各種屏幕尺寸進行了很好的調整，然後我對CSS和HTML做了一些調整，現在不是。今天我花了更多的時間試圖弄清楚。這讓我很生氣。網站沒有調整到較小的屏幕尺寸，因爲它應該

有一個看看，並告訴我我沒有造成問題的愚蠢的事情。

在此先感謝...

2014-12-13 Joe Nobody

你所說的「調整得非常好」的意思做，「現在是不是？」不知道要尋找什麼具體使診斷問題相當困難。基於我在源代碼中找到的CSS，它的行爲如預期。 – Brian 2014-12-13 03:59:05

對不起。以前，我有最大寬度：100％;設置在主容器上（#outermost），並且該網站自然會縮小到適合手機的100％寬度等等。現在它不起作用，我不知道爲什麼。頂層菜單也很靈敏。 – 2014-12-13 04:04:39

我認爲你正試圖使該網站響應，但不熟悉這個概念呢。

你可以開始通過添加媒體查詢，如提高你的CSS：

@media all and (max-width: 720px) { 
    #outermost{ 
    width:600px; 
    } 
}

它指示瀏覽器與ID #outermost的div的寬度調整爲600px的時候瀏覽器窗口的寬度小於或等於720px。

建議的方法是使用定義良好的自適應CSS框架（如Bootstrap）在頁面上使用更好的網格系統。

瞭解更多關於引導電網這裏：http://getbootstrap.com/css/#grid

2014-12-13 05:19:26

我確實嘗試過，但沒有幫助。我很樂意改變框架，但還沒有找到一個允許中間div填充頁眉和頁腳之間的空間，但是允許我的頁眉透明，以便頁面的背景圖像顯示出來。使用display：table;這是可能的。 – 2014-12-13 06:50:58

嘿@bakr ALL將包括打印視圖。我建議（AT）媒體屏幕... – 2014-12-13 14:58:18

@ShowcaseImagery這是他已經使用的媒體查詢 – 2014-12-13 20:24:49

我認爲，菜單也沒有反應。

您需要更改類「#header」和「#menu」的一些CSS屬性。對於這兩個類，嘗試用「display：block」替換「display：table-row」屬性。

2014-12-13 07:29:13

這沒有奏效。如果這是問題，那麼事件頁面不會縮放。但它似乎是唯一的一頁。這也是唯一沒有大滑塊的頁面。這將表明大滑塊是問題。但是，我仍然無法弄清楚。：o（ – 2014-12-13 13:16:30

好的。畢竟，我發現了這個問題。讓這成爲「有時這是最簡單的事情」的教訓。

有一個失蹤的「;」在CSS文件中。請看下圖：在CSS

#menu { 
    display: table-row 
    width: 100%; 
    height: 50px; 
}

2014-12-13 15:15:21

有可以檢查這個的CSS驗證器，你可以在將來使用它來避免這個問題:) – Andrea 2014-12-13 15:38:00

同意。我沒有驗證它，但使用了一個HTML驗證器，所以它當然沒有捕獲它。謝謝。 – 2014-12-13 18:12:01

已設置寬度爲100％ width: 100%;

2014-12-13 23:04:12

回答