1

私は最初のレスポンシブ テーマを作成していますが、これは私が抱えている 2 つの問題のうちの 2 つ目です。

http://digitaldemo.net/landmark/にアクセスして下部を見下ろすと、次のようにコード化された画像の横方向のリストがあります。

<ul>
<li>image 1</li>
<li>image 2</li>
<li>image 3</li>
<li>image 4</li>
<li>image 5</li>
</ul>

解像度が 480px 以下の画面では、リストは 5 つではなく 3 つの画像になりますが、マストヘッドの画像のように画像のサイズを変更したいと考えています。追加することでマストヘッドの画像のサイズを変更できましたmax-width:100%が、この画像のリストではうまくいきませんでした。

どんな助けでも大歓迎です！

ありがとう、

シンシア

4

1 に答える 1

2

まず第一に、基本的に同じ要素を 2 つの異なるサイズで表示および非表示にすることで、完全に間違った側面から問題に取り組んでいると思います:ユーザビリティの観点から (スクリーン リーダーを使用しているユーザーがサイトにアクセスした場合はどうなるでしょうか?) 、コーディング標準の観点から (肥大化したコード、保守が困難、DRY )、SEOの観点から (コンテンツの重複? キーワードの詰め込み?)。

次に、同じ を使用する 2 つの異なる要素がありますid。これは起こるべきではありません: sはid一意でなければなりません。

第三に、あなたの問題に到達します: CSS を介して動的に画像のサイズを変更するには、パーセントでその寸法を設定する必要があります。あなたの場合、CSSを次のように設定します。

#scroll.mobile ul {
    width: 100%;
}

#scroll.mobile li {
    width: 33%; /* You wanted three images per row, right? */
}

#scroll.mobile li img {
    max-width: 100%;
}

このようにして、リスト要素はウィンドウ スペース全体を使用し、各リスト アイテムはその 3 分の 1 だけを使用し、含まれる画像はウィンドウのこの 3 分の 1 に制限されます。

于 2013-04-19T10:42:07.210 に答える