如何在css中指定不同的图像，具体取决于用户是在桌面还是移动浏览器上访问

Question

关于移动设备的CSS的问题，

我在我的网站上有一个1260像素宽的图像，当我在手机上查看它时，它将退出网站，因为网站的其余部分基于960px布局。

我已经为移动设备制作了这些960px宽的图像但是如何在css中指定它是否是移动使用移动优化图像而不是常规网站上的图像。

所以基本上如果用户在台式计算机上访问该网站，它将显示1260px图像

如果他们在手机上访问该网站，它将显示960px图像

任何想法的家伙？

Answer 1

我不确定你是否想要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();
 });

 });

Answer 2

受Ivan的回答启发，这是一个jQuery版本，它使用媒体查询尽可能接近他的CSS3解决方案（这在Firefox 31和Safari 7中不起作用）：

$(document).ready(function() {
    var mqsmall = "(min-device-width:320px)";
    var mqbig   = "(min-device-width:960px)";
    function imageresize() {
        if(window.matchMedia(mqbig).matches) {
            $('img[data-src-1260px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-1260px'));
            });
        }
        else if(window.matchMedia(mqsmall).matches) {
            $('img[data-src-960px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-960px'));
            });
        }
    }

    imageresize();

    $(window).bind("resize", function() {
        imageresize();
    });
});

Answer 3

您正在寻找媒体查询。您可以根据宽度编写样式：

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.w3.org/TR/css3-mediaqueries/