1

http://library.skybundle.com/

ウィンドウのサイズが小さくなるまで (たとえば、携帯電話のサイズのように)、2 つの大きなアイコンを横に並べて配置する必要があります。それが起こると、右側のオレンジ色のアイコンが緑色の下に落ちるはずです。 1 つは垂直レイアウトを形成します。

言われたとおり、メディア クエリを使用する必要があることはわかっていますが、これを行う方法や、どれを使用すればよいかわかりません。

CSSは苦手ですが勉強中です。私はこれを理解するために何週間も費やして、たくさんの研究をしました。助けてください。ありがとう！

4

3 に答える 3

0

これが jsfiddle の出発点です (横並び -> 垂直レイアウトを示します)。

http://jsfiddle.net/gjGGw/1/

HTML

<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />

CSS

img{width:300px;height:300px;margin:0px 30px;}
于 2013-10-31T22:15:15.877 に答える
0

これが の他のルールより下であることを確認してください.skone-half。

これはうまくいくはずです

@media(max-width: 960px) {
    .skone-half {
        width: 100%;
    }
}

そうでない場合はコメントしてください。

これは、サイトのその部分をフィドルで非常に単純化したバージョンです。

デモ

したがって、そのフィドルによれば、コードが機能していることがわかります。実装に問題がある場合、または他の理由で機能しない場合はお知らせください。必要に応じて、変更点をpx単位で調整することもできます。コンテナの幅を壊したときに設定するだけです。

編集：

通常、含まれている要素の幅を固定幅から 100% に変更したいでしょうが、このように画像を中央に配置します。

デモ

あなたの場合、幅を変更する必要がある2つのコンテナがあるため、次のようになります。

@media(max-width: 960px) {
    .skone-half {
        width: 100%;
    }
    #container, #head-content {
        width: 100%;
    }
}
于 2013-11-01T06:50:35.070 に答える
0

これを css ファイルに追加します。

/*if the screen is 800 pixels or less */
@media only screen and (min-width: 800px) {
    .page {width: 100%; } /*set your page class to be 100% width */
}
于 2013-10-31T22:11:21.260 に答える