有問題告訴div根據屏幕大小更改大小

我在Dreamweaver中製作網站（使用引導程序。）我試圖告訴div在75％寬度時屏幕大於992px，寬度爲100％當屏幕比992px小時。任何想法我可能做錯了什麼？有問題告訴div根據屏幕大小更改大小

@media (min-width: 768px) and (max-width: 991px){ 
} 
.bar { 
    width: 100%; 
    background-color: #C54345; 
} 
@media (min-width: 992px) { 
} 
.bar { 
    width: 75%; 
    background-color: #C54345; 
}

來源

2015-12-13 Lady_dragon4

你有錯誤的地方括號，你打開它們後立即關閉媒體查詢括號！否則代碼很好。
您的代碼應該是這樣的：

@media (min-width: 768px) and (max-width: 991px){ 
    .bar { 
     width: 100%; 
     background-color: #C54345; 
    } 
} 
@media (min-width: 992px) { 
    .bar { 
     width: 75%; 
     background-color: #C54345; 
    } 
}

工作演示here

來源

2015-12-13 01:41:01

非常感謝！我對這件事很陌生，這是我第一次使用bootstrap。再次感謝你！ –

很高興聽到。如果答案對您有幫助，點擊大勾可以幫助未來的訪問者知道正確的答案。 –

它很好，可以被覆蓋。檢查這一點的一個好方法是在瀏覽器中啓動您的項目，並使用開發工具來查看用斜槓表示的重寫的CSS。

通常情況下，我不會採取這種方法。我不知道你的具體情況，但這樣做並不是真的會削減它的標準。

取而代之的是，因爲您使用的是bootstrap，我建議您查找內置於bootstrap中的「hidden-xs」/「visible-xs」類。我猜你正在嘗試在平板電腦上做不同的事情，而不是更大的屏幕尺寸，反之亦然。

來源

2015-12-13 01:33:07

這是通過引導工作我的第一次。 @media似乎是最好的方法。如果有更好的方法你知道我很想知道！ –

啊。我看到了問題。你實際上沒有正確地格式化你的代碼。 '@media（min-width：768px）and（max-width：991px）{ .bar {width：100％， background-color：＃C54345; }} @media（min-width：992px）{ .bar { width：75％， background-color：＃C54345; }}'嘗試一下。 –

您的括號錯誤，您正在使用';'而不是'，'在你的塊內。你只使用';'在你的街區的最後一行。從技術上講，你甚至不需要使用';'在你的街區盡頭。 –

有問題告訴div根據屏幕大小更改大小

回答

相關問題