不同的屏幕尺寸与媒体查询加载图像

-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

不同的屏幕尺寸与媒体查询加载图像

回答

相关问题