Как поменять изображения на мобильном/рабочем столе в отзывчивом режиме

У меня есть список изображений для настольного и мобильных телефонов в следующей структуре папок:Как поменять изображения на мобильном/рабочем столе в отзывчивом режиме

img: 
    img-1.png 
    img-2.png 
    img-3.png 
    img-4.png 
    img-5.png 
    img-6.png 

img/mobile: 
     img-1.png 
     img-2.png 
     img-3.png 
     img-4.png 
     img-5.png 
     img-6.png

я могу использовать следующий код для переключения рабочего стола img-1.png:

<span id="switcher"> 
    <img id="houdini" src="img/img-1.jpg" alt=""> 
</span> 

<span id="switcher2"> 
    <img id="houdini2" src="img/img-2.jpg" alt=""> 
</span> 

<span id="switcher3"> 
    <img id="houdini3" src="img/img-3.jpg" alt=""> 
</span> 

<span id="switcher4"> 
    <img id="houdini4" src="img/img-4.jpg" alt=""> 
</span> 

<span id="switcher5"> 
    <img id="houdini5" src="img/img-5.jpg" alt=""> 
</span>

CSS:

@media only screen and (max-device-width: 489px) { 
    span[id=switcher] { 
     display:block; 
     background-image: url(/mobile/img-1.jpg) !important; 
     background-repeat: no-repeat !important; 
     background-position: center !important; 
    } 
    img[id=houdini] {display: none !important;} 
}

Как я могу избежать написания выше CSS для эв ery img-1 до 6 ... Могу ли я пройти/получить доступ к ID?

Можно ли удалить !important?

(должен работать на IE8)

источник

2014-09-22 Oam Psy

Используйте класс вместо идентификатора, классы могут быть применены к любому количеству элементов. Кроме того, удалите! Это не нужно, если только вы не делаете что-то ужасно неправильное в первую очередь. – Kyle

@KyleSevenoaks - спасибо за комментарии, я буду использовать их. Как насчет вопроса о сохранении, чтобы написать фоновое изображение: url (/mobile/img-1.jpg) для каждого изображения. Могу ли я получить доступ к img-ID? –

Как это отличается от вашего предыдущего вопроса? http://stackoverflow.com/questions/25973118/incrementing-a-background-image-id-with-sass – cimmanon

Вы можете динамически контролировать

$('body').append("<style type='text/css' id="+spanid+">@media screen and (max-device-width: 489px) { span[id="+spanid+"] {/* styles */ } }</style>");

Для стиля удалить

$('#spanid').detach();

Или

$('#spanid').remove();

источник

2014-09-22 10:59:28 Hamix

Вместо того, чтобы использовать фоновое изображение рабочий стол, вы coul d место каждая пара изображений для рабочего стола/мобильного телефона рядом друг с другом и переключать их display типа, давая им следующие классы:

Example Here

<img src="http://placehold.it/200/f30" alt="houdini" class="visible-mobile"> 
<img src="http://placehold.it/200/3f0" alt="houdini" class="hidden-mobile">

.visible-mobile { 
    display: none !important; 
} 

@media (max-width: 489px) { 
    .visible-mobile { 
    display: inline !important; 
    } 

    .hidden-mobile { 
    display: none !important; 
    } 
}

источник

2014-09-22 11:00:40

Спасибо, хорошее решение. При начальной загрузке страницы создаются 2 HTTP-запроса? –

@OamPsy Да. однако даже с использованием фоновых изображений будут созданы 2 HTTP-запроса, сначала для отображения элемента изображения в HTML (который будет скрыт после), а затем для загрузки фонового изображения. –

, работая над оптимизацией мобильных устройств, сама смотря на вещи, которые нужно делать для изображений, этот пост очень прост. Как бы вы не загружали вдвое больше ресурсов? – lemunk

<span id="switcher" class="myswitch"> 
    <img id="houdini" src="img/img-1.jpg" alt=""> 
</span> 

<span id="switcher2" class="myswitch"> 
    <img id="houdini2" src="img/img-2.jpg" alt=""> 
</span> 

<span id="switcher3" class="myswitch"> 
    <img id="houdini3" src="img/img-3.jpg" alt=""> 
</span> 

<span id="switcher4" class="myswitch"> 
    <img id="houdini4" src="img/img-4.jpg" alt=""> 
</span> 

<span id="switcher5" class="myswitch"> 
    <img id="houdini5" src="img/img-5.jpg" alt=""> 
</span>

CSS =

@media only screen and (max-device-width: 489px) { 
    span.myswitch { 
     display:block; 
     background-image: url(/mobile/img-1.jpg) !important; 
     background-repeat: no-repeat !important; 
     background-position: center !important; 
    } 
    img[id=houdini] {display: none !important;} 
    }

источник

2014-09-22 11:00:54

<picture> 

    <source srcset="https://mockuphone.com/static/images/devices/apple-imac2015retina-front.png" media="(min-width: 1000px)"> 
    <source srcset="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" media="(min-width: 500px)"> 
    <source srcset="https://mockuphone.com/static/images/devices/apple-iphone6splus-spacegrey-portrait.png" media="(max-width: 500px)"> 

    <img src="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" alt="Apple Product" id="my-image-1" class="my_image" style="max-width: 100vw; max-height: 100vh;"> 

</picture>

Попробуйте это. Используйте ширину min-device-width и/или max-device-width, если вы не хотите, чтобы изображение изменялось при изменении размера браузера. Надеюсь, это поможет!

источник

2017-07-13 06:16:05 sarthak7gupta

Как поменять изображения на мобильном/рабочем столе в отзывчивом режиме

ответ

Смежные вопросы