如何在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();
 });

 });