CSS - 流體網格佈局網站的不同標題圖片

Question

編輯：進一步閱讀接下來的5行！我的問題不在於爲手機，平板電腦和桌面做不同的css（@media查詢） - 問題在於將IMAGE.SRC屬性從INSIDE CSS中更改。

我試圖做一個新的流體網站，我試圖創建3張不同的標題圖片：

1. 移動頭部圖像（低分辨率）
2. 平板標題圖片（中等RES）
3. 桌面頭圖像（高分辨率）

（所有的圖像也變化在縱橫比）

我如何得到這個工作？

目前我試圖簡單地改變SRC在CSS每個CSS第（手機，平板電腦，臺式機）

像這樣：

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

我們都知道這行不通：D我也不想用background-image代替。

這樣做的正確方法是什麼？

我應該從Adobe Dreamweaver CS6中生成JavaScript代碼並從那裏更改.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); 
    } 
} 

現在你已經讀到的一切，你可以想象，我可以」 t從內部的CSS改變img.src ...，我認爲唯一的方法是從adobe DW cs6入侵未格式化的自動生成的JavaScript，不是嗎？

Answer 1

我現在已經設置div_header內的另一個DIV，並給予孩子的div背景圖像和硬編碼的寬度和高度（匹配各個圖像），所以我僞造標籤，現在必須通過CSS來定義的，而不是限定的圖像源的屬性（backgound-）圖像源的能力;）

無論如何感謝您的回答

Answer 2

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

現在用來媒體查詢CSS

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

} 

more info about this

Answer 3

如果您在差異分辨率下使用單幅圖像，則無需拍攝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-index值。

這裏演示http://jsfiddle.net/5vpG7/70/

Answer 4

您可以使用CSS3 media queries您想要的結果.....

而且我想你應該看看這篇文章它會幫助你： -

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

Answer 5

您可以通過使用媒體做不同的圖像查詢

移動

@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 
}