我的網頁不是演戲響應

此代碼是一個簡單的背景圖像，但顯示了3幅圖像時，通過手機瀏覽器看到我的網頁不是演戲響應

body { 
background-image: url('image-1.jpg'); 
width: 500px; 
height: 600px; 
position: relative; 
-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover; 
} 

@media only screen and (max-width: 767px) { 
    body { 
    background-image: url('image-2.jpg'); 
    } 
}

請提出修改意見，以使圖像適合屏幕

來源

2015-12-20 arnab chattopadhyay

你不清楚你想達到什麼目的。無論如何，如果你想讓網頁響應 - 不要設置像素寬度和高度。順便說一句，我只能看到你的代碼中的3個圖像中的2個。請重新說明你的問題。 – Cheslab

你CSS只會改變身體的背景圖像，我認爲這不是您正在尋找的行爲。爲了有一個更好的響應式設計，你需要設置你的身體尺寸百分比，像這樣width:100vw; height:100vh;這可能會給你你正在尋找的行爲。

來源

2015-12-20 07:51:19

亞這就是我要找的將適用於所有屏幕尺寸？ –

添加這將使您的「身體」採取全屏大小，這將允許您的代碼運行在所有屏幕尺寸。如果您想將全新圖像用作不同屏幕尺寸的背景，則可以使用@media標記。 –

只需修改您的代碼是這樣的：

@media only screen and (max-width: 767px) { 
    body { 
    background-image: url('image-2.jpg'); 
    background-size: cover; 
    } 
}

它將重新工作。

來源

2015-12-20 14:30:45 Paradoxetion

我的網頁不是演戲響應

回答

相關問題