Css媒體查詢問題

-3

嗨，我創建了一個示例網站作爲練習...爲什麼我的頁腳部分下降，同時在620寬度下我的屏幕縮小，還有，大的空間將顯示.. ..爲什麼我的< h3 id =「art」> .. 如何去除下頁腳的空間，我不想我的話去頁腳要麼Css媒體查詢問題

繼承人的示例站點：http://chess-master-guide-23476.bitballoon.com/views/main_page.html

任何解決方案？

來源

2015-05-25 Shane

在這裏發表您的代碼。 –

請隔離此問題，並在問題中提及具體的HTML/CSS代碼以供參考。 – FloatingRock

在'＃art' id CSS選擇器中將'height：550px'更改爲'min-height：550px'，然後查看您工作的天氣，然後嘗試使用整個頁面的媒體查詢而不僅僅是頁面的這一部分。 –

您好，這是你的CSS

#art { 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4c4c4c 0px, #595959 12%, #666 25%, #474747 39%, #2c2c2c 50%, #000 51%, #111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%) repeat scroll 0 0; 
    color: #fff; 
    font-weight: 400; 
    height: 572px; 
    padding-left: 80px; 
    padding-right: 200px; 
}

您使用固定高度，這個div這是問題之一。並且你正在使用padding-left = 80px和padding-right = 200px; 它的意思是你只需要280px的填充桌面或大屏幕它應該是確定的，但對於移動或如你所說少於那麼620px的分辨率，你有280px只填充足夠的移動或小於620px的分辨率。其次，您正在使用固定高度的div ID「藝術」所以這就是爲什麼div仍然保持相同的大小，但由於寬度正在減小，文本正在增加長度。所以你有兩個問題。使用高度動態像

height: auto;

或不使用高度屬性，則高度將與元素來填充或使用媒體查詢爲不同的設備。它應該解決你的問題。現在你的文字不會下降。但填充仍然推動你的文字在短長度的行，所以你必須調整你的填充也。 like

@media screen and (max-width: 620px) { 
    padding-left: 40px; 
    padding-right: 100px; 
}

希望這可以幫助你。感謝

這裏是一個像我只是改變

高度：自動;

這個形象是從設備模擬器320X640

enter image description here

來源

2015-05-25 10:20:52

我接受了一部分建議，並將其設置爲#art { height：auto; width：300px; }它完美的thx :) – Shane

Css媒體查詢問題

回答

相關問題