旗幟自動適合移動用戶

我有一個旗幟設置爲中心我想做什麼它如何使它自動適合移動？這是我的CSS代碼。旗幟自動適合移動用戶

#banner{ 
background: transparent url(banner.jpg) no-repeat; 
width: 870px; 
height: 300px; 
margin-bottom: 20px; 
border: 5px solid #fff;}

HTML

<div id="banner"></div>

圖片This

幫助？

來源

2017-07-25 C. Pasion

，具有明顯的語法錯誤。缺少'''。爲了適應移動設備，您應該使用媒體查詢。 – Raptor

忘了把它..如何呢？如何使用媒體查詢？ –

媒體查詢：https：//www.w3schools.com/css/css_rwd_mediaqueries.asp –

你會想要使用媒體查詢。默認情況下，該元素將是100％寬度，然後使用媒體查詢來設置寬度，一旦窗口足夠寬。

#banner { 
 
    background-color: #f00; 
 
    height: 300px; 
 
    margin-bottom: 20px; 
 
    border: 5px solid #fff; 
 
} 
 
@media (min-width: 870px){ 
 
    #banner { 
 
    background-color: #0f0; 
 
    width: 870px; 
 
    } 
 
}

<div id="banner"></div>

來源

2017-07-25 03:13:42

我試過了，但它沒有工作.. –

忘記把元視口？此外，如果您使用媒體查詢，則使用固定寬度的情況非常罕見。改用寬度百分比或'vw'。 – Raptor

我已經輸入了它..我不知道爲什麼..：/ –

旗幟自動適合移動用戶

回答

相關問題