EDIT：继续阅读接下来的5行！我的问题不是为移动设备、平板电脑和台式机执行不同css的逻辑(@media查询)——问题是从内部css更改IMAGE.SRC属性。
我正在尝试制作一个新的流体网站，我正在尝试创建3个不同的标题图像：
- 移动标头图像(低分辨率)
- Tablet页眉图像(中等分辨率)
- 桌面标题图像(高分辨率)
(所有图像的纵横比也不同)
我该如何让它发挥作用？
目前，我已经尝试简单地为每个CSS SECTION(移动设备、平板电脑、台式机)更改CSS中的SRC
像这样：
#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);
}
}
既然你已经阅读了所有内容，你应该想象一下，我无法从css内部更改img.src。。。，我认为唯一的方法是从adobeDWcs6中破解未格式化的自动生成的javascript，不是吗？
您可以使用CSS3 media queries来获得所需的结果。。。。。
我认为你应该阅读这篇文章，它将帮助你：-
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
您可以使用媒体查询生成不同的图像
移动
@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
}
如果您使用不同分辨率的单个图像，则无需拍摄3张图像。取较大的图像(对于桌面大小)并写下以下css
<header><img src="img/header_m.png" /></header>
CSS
header img{max-width:100%}
我相信你知道媒体的质疑http://css-tricks.com/css-media-queries/
更改前景图像
如果您想更改不同设备的前景图像，请尝试z索引
.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/
。。。。。。。。。。。。。。。。。。。。。。
现在用于媒体查询css
@media screen and (min-width: 500px) and (max-width: 800px) {
// your css code here
}
有关此的更多信息
我现在在div_header中设置了另一个div，并为该子div提供了一个背景图像和硬编码的宽度和高度(与各个图像匹配)，所以我伪造了一个标签，该标签现在可以通过css定义(backgound-)图像源，而不是定义图像源的属性；)
谢谢你的回答