CSS - صور رأسية مختلفة لموقع تخطيط الشبكة المرنة

Question

يحرر :اقرأ المزيد ثم الأسطر الخمسة التالية!مشكلتي ليست منطق عمل CSS مختلف للجوال والكمبيوتر اللوحي وسطح المكتب (@media الاستعلام) - المشكلة هي تغيير IMAGE.SRC السمة من داخل CSS.

أحاول إنشاء موقع ويب جديد مرن وأحاول إنشاء 3 صور رأسية مختلفة:

1. صورة رأس الهاتف المحمول (دقة منخفضة)
2. صورة رأس الجهاز اللوحي (دقة متوسطة)
3. صورة رأس سطح المكتب (دقة عالية)

(تختلف جميع الصور أيضًا في نسبة العرض إلى الارتفاع)

كيف يمكنني الحصول على هذا للعمل؟

لقد حاولت حاليًا ببساطة تغيير SRC في CSS لكل قسم CSS (الجوال، الجهاز اللوحي، سطح المكتب)

مثله:

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

نعلم جميعًا أن هذا لا يعمل:D أيضًا لا أريد استخدامه background-image بدلاً من.

ما هي الطريقة الصحيحة للقيام بهذا العمل؟

هل ينبغي علي اختراق كود جافا سكريبت الذي تم إنشاؤه من Adobe Dreamweaver CS6 وتغيير .src من هناك؟

أنا متأكد من أن هناك طريقة 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...، أعتقد أن الطريقة الوحيدة للقيام بذلك هي اختراق جافا سكريبت غير المنسق الذي تم إنشاؤه تلقائيًا من 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

إذا كنت تستخدم صورة واحدة بدقة مختلفة، فلن تحتاج إلى التقاط 3 صور.التقط الصورة الأكبر (لحجم سطح المكتب) واكتب ملف 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 لعرض الجهاز المعني.

التجريبي هنا http://jsfiddle.net/5vpG7/70/

Answer 5

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

تستخدم الآن ل استعلام الوسائط CSS

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

 }

مزيد من المعلومات حول هذا