CSS — различные изображения заголовков для веб-сайта с жидкой сеткой

Question

РЕДАКТИРОВАТЬ :читай дальше следующие 5 строк!Моя проблема не в логике создания разных CSS для мобильных устройств, планшетов и настольных компьютеров (@media запрос) - проблема в том, чтобы изменить IMAGE.SRC атрибут ИЗ ВНУТРИ CSS.

Я пытаюсь создать новый гибкий веб-сайт и пытаюсь создать 3 разных изображения заголовка:

1. Изображение заголовка мобильного устройства (низкое разрешение)
2. Изображение заголовка планшета (среднее разрешение)
3. Изображение заголовка рабочего стола (высокое разрешение)

(все изображения также различаются по соотношению сторон)

Как мне заставить это работать?

В настоящее время я пытался просто изменить SRC в CSS для каждого РАЗДЕЛА CSS (мобильный телефон, планшет, настольный компьютер).

Так:

#img_header {
   src: url(img/header_m.png);
}

Мы все знаем, что это не работает :D и я не хочу использовать background-image вместо.

Как правильно это сделать?

Должен ли я взломать сгенерированный код JavaScript из Adobe Dreamweaver CS6 и изменить оттуда .src?

Я уверен, что есть способ CSS, так что скажите мне, ребята.Спасибо

ОБНОВЛЯТЬ:Я должен был сказать, что уже использую медиа-запросы...

Вот мой CSS:

/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 97.826%;
    padding-left: 1.0869%;
    padding-right: 1.0869%;
}

#div_header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#img_header {
    src: url(img/header_m.png);
}

/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) {
    .gridContainer {
        width: 93.451%;
        padding-left: 0.7744%;
        padding-right: 0.7744%;
    }

    #div_header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #img_header {
        src: url(img/header_t.png);
    }
}

/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) {
    .gridContainer {
        width: 89.1614%;
        max-width: 1232px;
        padding-left: 0.4192%;
        padding-right: 0.4192%;
        margin: auto;
    }

    #div_header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #img_header {
        src: url(img/header.png);
    }
}

ТЕПЕРЬ, когда вы все прочитали, вы должны представить, что я не могу изменить img.src изнутри CSS... я думаю, что единственный способ сделать это - взломать неформатированный автоматически сгенерированный javascript из Adobe DW cs6, не так ли?

Answer 1

Теперь я установил еще один div внутри div_header и дал этому дочернему div фоновое изображение и жестко запрограммированные ширину и высоту (соответствующие отдельным изображениям), поэтому я подделал тег, который теперь имеет возможность определять (backgound-) изображение источник через CSS вместо определения атрибут источника изображения ;)

в любом случае спасибо за ваши ответы

Answer 2

Вы можете использовать CSS3 media queries для желаемого результата.....

И я думаю, вам стоит прочитать эту статью, она вам поможет: -

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-Response-web-design/

Answer 3

Вы можете создавать разные изображения, используя медиа-запросы

мобильный

@media only screen and (min-width : 320px) and (max-width : 480px) {
 Your image for mobile
}

Таблетка

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){

Your image for tablet
}

Answer 4

Если вы используете одно изображение с разным разрешением, вам не нужно делать три изображения.Возьмите изображение большего размера (для размера рабочего стола) и напишите приведенный ниже CSS.

<header><img src="img/header_m.png" /></header>

CSS

header img{max-width:100%}

Я думаю, вы знаете о медиа-запросах http://css-tricks.com/css-media-queries/

Чтобы изменить изображение переднего плана

Если вы хотите изменить изображения переднего плана для разных устройств, попробуйте z-index.

.header{
    background-color:red;
    position:relative;  height:auto}

img:first-child{
    position:absolute; top:0; left:0;
    z-index:-1; width:200px
}
img{
    position:absolute; top:0; left:0;
    z-index:10; width:200px
} 

Измените значение z-index для соответствующей ширины устройства.

Демо здесь http://jsfiddle.net/5vpG7/70/

Answer 5

......................

Теперь привык CSS медиазапроса

    @media screen and (min-width: 500px) and (max-width: 800px) { 
// your css code here 

 }

больше информации об этом