如何根據（較小）窗口大小自定義CSS？

所以我看到有一個不同的CSS調用，取決於屏幕有多大。如何根據（較小）窗口大小自定義CSS？

例正常大小：

注紅酒吧沒有任何邊距和文本是自定義CSS （一個額外的CSS文件中提供，而不是bootstrap.css）

例微小的尺寸：

注意我添加的CSS基本上沒有了。

我該如何解決這個問題？我認爲這是一件與

@media (max-width: 767px)

但是它沒有得到固定的額外的CSS文件中添加此之後。

這是我使用的CSS：

#The red bar 
.top .alert { 
margin-bottom: 0px; 
} 
#The text css 
.very-big { 
color: #20F587; 
font-size: 115px; 
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); 
font-weight: bold; 
} 
.title-very-big { 
color: #20F587; 
font-size: 75px; 
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); 
font-weight: bold; 
} 
.p-very-big { 
color: #20F587; 
font-size: 15px; 
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); 
font-weight: bold; 
}

來源

2014-02-19 MrBlackDrag0nfly

如果您能向我們展示您的自定義CSS，它可能會更容易回答您。 –

是的，我已經添加了它。 – MrBlackDrag0nfly

URL，以檢查它是否將是有益的。

謂曰：

任何東西@media (max-width: 767px)將不出現在更大的版本。

max-width樣式不會在屏幕上比設定大出現（在你的情況767px）和min-width樣式不會出現，直到屏幕至少是一樣大的設置。所以如果所需的頁邊距和文本樣式只能在較大的尺寸下工作，可能是因爲它們在某個地方處於min-width查詢中，而不是max-width。

旁註：如果可能，它會更好（並且使事情變得更容易）來刪除不需要的樣式，而不是試圖覆蓋樣式。

編輯： 我發現你的網站在http://mrblackdragonfly.com/404/

的.top .alert有，但它是一個(min-width: 768px)查詢中。將其移出並保證金問題應該消失。

這同樣適用於您的文本樣式。

來源

2014-02-19 21:34:42 jakealbaugh

這是完全獨特的CSS，並沒有覆蓋任何東西。我對@media也不是很好，你可以給一個初學者的答案嗎？ O，這是網址：http://mrblackdragonfly.com/404/ – MrBlackDrag0nfly

刪除style.css中的第49和52行 – jakealbaugh

想像媒體查詢，如身體類或其他東西。例如：'body.min767 p {font-size：12px}'將覆蓋'p {font-size：16px}' – jakealbaugh

如何根據（較小）窗口大小自定義CSS？

回答

相關問題