0

私は初めて手作業でコーディングしてサイトに取り組んでいます (主に印刷デザイナー)。私は HTML と CSS のみを使用しようとしています。Javascript に飛び込む時間がなく、何を使用しているかを本当に理解したいからです。したがって、私のメイン コンテンツは、すべて同じサイズで 3 列幅の画像のグリッドに設定されています。

さまざまなブラウザー/デバイス サイズでレスポンシブ デザインにメディア クエリを使用したいと考えています。これを理解している限り、デバイス/ブラウザーのサイズに応じて読み込まれる同じ HTML レイアウトに対して異なる CSS ファイルを作成します。

現在のように、グリッド内の各画像は a タグとして div 内に設定されます。次に、CSS を使用して background プロパティで画像を定義しました。

<div id="main-content">
    <div id="project-1">
        <a id="image-1" href="URL here"></a>
    </div>
    <div id="project-2">
        <a id="image-2" href="URL here"></a>
    </div>
    ...etc.

#image-1 {
    background: url(image.png) no-repeat;
    width: x;
    height: y;
}

...etc.

少し調査した結果、これは良い解決策ではないようです。タグは HTML 自体で使用することをお勧めします。

私の質問は、これについて間違った方法で行っていますか? メディア クエリでレイアウトを変更できるように、画像を配置する場所について少し混乱しています。アドバイスをよろしくお願いします。乾杯！

4

1 に答える 1

0

これは私にはまったく問題ないように見えます。

あなたの場合、メディアクエリを定義するときのように、CSS を介して個別にすべてを配置するのではなく、HTML<img>内にタグを付けて画像を追加し、すべて同じクラスを与えることだけです。レスポンシブ レイアウトでは、その 1 つのクラスのand<a>を変更するだけでよく、画像はすべてそれに応じてスケーリングされます。少しだけ手間が省けます。widthheight

これが比較的明確であることを願っています。:)

于 2013-04-25T23:30:24.317 に答える