最初にレンダリングをお見せしましょう。かなり良いと思われる場合は、実装コードを参照してください。
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のウェブサイトへのご支援ありがとうございます!