1

编辑：进一步阅读接下来的 5 行！我的问题不是为移动设备、平板电脑和台式机（查询）做不同的 css 的逻辑- 问题是从 INSIDE CSS@media更改属性。IMAGE.SRC

我正在尝试制作一个新的流畅网站，并且正在尝试创建 3 个不同的标题图像：

  1. 移动标题图片（低分辨率）
  2. 平板电脑标题图片（中等分辨率）
  3. 桌面标题图像（高分辨率）

（所有图像的纵横比也有所不同）

我怎样才能让它工作？

目前，我尝试简单地为每个 CSS SECTION（移动设备、平板电脑、桌面）更改 CSS 中的 SRC

像这样：

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

我们都知道这不起作用 :D 我也不想使用它background-image。

这样做的正确方法是什么？

我应该侵入 Adob​​e 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);
    }
}

现在您已经阅读了所有内容，您应该想象我无法img.src从内部 css 更改...，我认为这样做的唯一方法是从 adobe DW cs6 侵入未格式化的自动生成的 javascript，不是吗?

4

5 回答 5

1

如果您使用不同分辨率的单张图像，则无需拍摄 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/

于 2012-10-03T11:15:31.503 回答
1

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

而且我认为您应该阅读这篇文章，它将对您有所帮助：-

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

于 2012-10-03T11:15:58.827 回答
1

您可以使用媒体查询来制作不同的图像

移动的

@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
}
于 2012-10-03T11:20:16.143 回答
0

……………………………………………………………………………………………………………………

现在用于媒体查询 css

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

 }

有关此的更多信息

于 2012-10-03T11:14:45.287 回答
0

我现在在 div_header 中设置了另一个 div，并为该子 div 提供了背景图像和硬编码的宽度和高度（与单个图像匹配），所以我伪造了一个现在能够定义（背景）图像的标签通过 css 源而不是定义图像源的属性；）

无论如何谢谢你的回答

于 2012-10-03T12:34:46.497 回答