1

編集：さらに読んでから、次の5行を読んでください！私の問題は、モバイル、タブレット、デスクトップ (@mediaクエリ) で異なる css を実行するロジックではありません。問題は、IMAGE.SRC属性 FROM INSIDE CSS を変更することです。

新しい流動的な Web サイトを作成しようとしており、3 つの異なるヘッダー画像を作成しようとしています。

  1. モバイルのヘッダー画像 (低解像度)
  2. タブレットのヘッダー画像 (中解像度)
  3. デスクトップのヘッダー画像 (高解像度)

（すべての画像も縦横比が異なります）

これを機能させるにはどうすればよいですか？

現在、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...、これを行う唯一の方法は、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

div_header 内に別の div を設定し、その子 div に背景画像とハードコードされた幅と高さ (個々の画像に一致する) を与えたので、(背景) 画像を定義する機能を持つタグを偽造しました画像ソースの属性を定義する代わりに css 経由でソース ;)

とにかくあなたの答えに感謝します

于 2012-10-03T12:34:46.497 に答える
0

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

css のメディアクエリに使用されるようになりました

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

 }

これに関する詳細情報

于 2012-10-03T11:14:45.287 に答える