-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は
ので、ちょうどあなたの体に高さを追加し、そうbackground-size:coverを忘れてはいけない、あなたのidはあなたの体の100％の幅と高さがかかりますが、あなたはあなたの体にDIMENTIONを設定しなかった
#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;
}
}
'html、body {height：100％;}'を追加しないと、divの高さが 'auto'の高さになっても表示されません...また、 'head'のHTMLビューポートメタタグ – Aziz
ごめんなさい、それは見落とし、私はまだ表示されない前にすべてを追加しました – emekaokoli
問題を再現できませんhttps://jsfiddle.net/azizn/7fpb1s0m/ – Aziz