как указать другое изображение в css в зависимости от того, заходит ли пользователь на рабочий стол или мобильный браузер

Question

Просто вопрос о css для мобильных устройств,

У меня есть изображение шириной 1260 пикселей на моем веб-сайте, и когда я смотрю на него по телефону, оно разрушает веб-сайт, поскольку остальная часть веб-сайта основанана макете 960 пикселей.

Я сделал эти изображения шириной 960 пикселей для мобильного устройства, но как мне указать в CSS, что это мобильное изображение, оптимизированное для мобильных устройств, а не на обычном веб-сайте?.

Таким образом, в основном, если пользователь заходит на веб-сайт на настольном компьютере, он показывает изображение размером 1260 пикселей

, а если он посещает веб-сайт на мобильном телефоне, он отображает изображение размером 960 пикселей

есть идеи, ребята?

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

Вдохновленный ответом Ивана, вот версия 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/