最初にレンダリングをお見せしましょう。かなり良いと思われる場合は、実装コードを参照してください。
1. 1行あたりの固定数：レイアウトの美学を確保する
.list li {width：20％; display：inline-block;*display：inline;*zoom：1; overflow：hidden;}2。ページ幅に応じて数とサイズを調整します：写真とテキストの読みやすさを確認してください
.list li {width：20％; display：inline-block;*display：inline;*zoom：1; overflow：hidden;}1。メディアクエリ制御幅
@media screen and（max-width：1280px）{。list-table1 li {width：25％}}@メディアスクリーンと（max-width：600px）{。list-table1 li {width：33.3％}}@media screen and（max-width：400px）{。便利ですが、互換性があります
2。JSコントロール
$（window）.resize（function（）{resizelist（）;}）function resizelist（）{var s_width = $（window）.width（）; // console.log（ "s_width："+s_width）; if（s_width> 600 && s_width <= 1280）{$（ " li "）。css（" width "、" 25％ "）;} else if（s_width> 400 && s_width <= 600）{$（"。list-table1 li "）。css（" width "、" 33.3％ "）;} li "）。css（" width "、" 50％ "）;} else if（s_width <= 200）{$（"。list-table1 li "）。注：
1。写真は変形しません
.a-common {width：auto; height：auto;}。a-common img {width：100％; height：auto;}2。テキストオーバーフロー処理
.title、.subtitle {width：auto; text-align：center; overflow：hidden; white-space：nowrap; text-overflow：ellipsis;}上記は、エディターが導入したJS実装リストのレスポンシブレイアウトです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！