不同的屏幕尺寸與媒體查詢加載圖像

-1

我想加載圖像的不同屏幕尺寸與媒體查詢，但它不顯示在div容器;當我檢查瀏覽器加載，但不顯示。我不知道我做錯了什麼不同的屏幕尺寸與媒體查詢加載圖像

這裏是代碼。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
    <title></title> 
    <link href="css/test.css" rel="stylesheet"> 
</head> 
<body> 
<pre> 
    <script src="Jarts.js"></script> 

</pre> 
<div id="skjd2344jd"></div> 

</body> 
</html>

這裏的CSS

#skjd2344jd{ 
    height: 100%; 
    width:100%; 
} 

@media only screen and (min-device-width: 480px){ 
#skjd2344jd { 
    background-image: url("../img/optimal_small.png"); 
    background-repeat: no-repeat; 
    } 
} 
@media only screen and (min-width: 481px) and (max-width: 1600px) { 
#skjd2344jd { 
    background-image: url("../img/optimal.png"); 
    background-repeat: no-repeat; 
    } 
}

來源

2016-03-19 emekaokoli

嘗試添加'html，body {height：100％;}'否則，當它的百分比高度爲auto時，你的div不會顯示出來......另外，你可能需要添加'head'中的HTML視口元標記 – Aziz

對不起，它是一個疏忽，I'v e之前添加所有這些仍然不顯示 – emekaokoli

無法重現您的問題https://jsfiddle.net/azizn/7fpb1s0m/ – Aziz

您的ID將採取100％的寬度和你的身體的高度，但您沒有設置漁政船到你的身體那麼只需添加高度，你的身體，不要忘記background-size:cover所以你的代碼看起來像是this

來源

2016-03-19 13:29:57

不同的屏幕尺寸與媒體查詢加載圖像

回答

相關問題