デバイス毎に違う画像を表示(CSSのみで可能)

pcでimg src画像
spで背景画像表示、みたいにする(逆もしかり)

ただ、それで対応できない場合は、
それぞれのソースを記述して、display:noneさせる方式もあり。

html
——————————————————————–
<body>
<div id=”container”>
<div class=”mainimg”>
<p class=”img”><img src=”pc.jpg” /></p>
</div>
</div>
</body>
——————————————————————–
css
——————————————————————–
@media screen and (max-width: 768px) {
#container {
width: 100%;
}
img {
max-width:100%;
}
.mainimg{
background:none;
}
}
@media screen and (min-width: 769px) {
#container {
width: 960px;
margin: 0 auto;
}
.mainimg{
background:url(sp.jpg) top center no-repeat;
height:417px;
width:960px;
}
p.img {
display:none;
text-align:center;
}
}