come specificare un'immagine diversa in css a seconda se l'utente visita su un desktop o un browser mobile

Question

Solo una domanda su CSS per i dispositivi mobili,

Ho un'immagine che è 1260px ampia sul mio sito e quando ho guardarlo sul telefono lo destituisce come il resto del sito web si basa su un layout 960px.

Ho fatto queste immagini per essere ora 960px di larghezza per il dispositivo mobile, ma come faccio a specificare in css che se si tratta di un mobile utilizzare l'immagine ottimizzata mobile invece di quella sul sito web regolare.

Quindi, in pratica, se un utente va sul sito web su un computer desktop che mostrerà l'immagine della 1260px

e se visitano il sito web su un cellulare visualizzerà l'immagine

qualsiasi ragazzi idee 960px?

Answer 1

Im non sicuro se si vuole JS, ho deciso di rispondere alla tua domanda, se si desidera CSS3, provare questo:

HTML:

<img src="image.jpg" 
    data-src-960px="image-960px.jpg" 
    data-src-1260px="image-1260px.jpg" 
    alt=""> 

CSS:

Versione 210

@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

Stai cercando query multimediali. È possibile scrivere stili condizionali sulla larghezza:

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

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

Answer 3

Ispirato dalla risposta di Ivan, qui è una versione jQuery che utilizza media query per essere il più vicino possibile alla sua soluzione di CSS3 (che non funziona per me in Firefox 31 e 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(); 
    }); 
});