只是关于移动设备的CSS的问题,
我的网站上有一个1260像素宽的图像,当我在手机上看时,它会破坏网站,因为网站的其余部分是基于960像素的布局.
我已经将这些图像的宽度设计为960像素的移动设备,但是我如何在css中指定,如果它是移动使用移动优化的图像,而不是常规网站上的图像.
所以基本上如果一个用户在桌面电脑上的网站上,它会显示1260像素的图像
如果他们在移动设备上访问该网站,它将显示960像素的图像
任何想法家伙？
解决方法
我不知道如果你想要JS,我决定回答你的问题,如果你想要
CSS3,尝试这样：
HTML：
<img src="image.jpg"
data-src-960px="image-960px.jpg"
data-src-1260px="image-1260px.jpg"
alt="">
CSS：
@media (min-device-width:320px) {
img[data-src-960px] {
content: attr(data-src-960px,url);
}
}
@media (min-device-width:960px) {
img[data-src-1260px] {
content: attr(data-src-1260px,url);
}
}
jQuery版本：
$(document).ready(function() {
function imageresize() {
var contentwidth = $('#content').width();
if ((contentwidth) < '960'){
$('.imageclass').attr('src','image-960px.jpg');
} else {
$('.imageclass').attr('src','image-1260px.jpg');
}
}
imageresize();//Activates when document first loads
$(window).bind("resize",function(){
imageresize();
});
});
