1

最近、Gridlyワードプレステーマ（レスポンシブ）をダウンロードし、cssメディアクエリを使用して、さまざまな幅（1020px、610px、480px、320px）でレイアウトを微調整しました。

こちらの私のページをご覧ください。

ウィンドウを1020pxから610pxおよび610pxから480pxに最小化すると、グリッドがスムーズに再配置されます。「問題」は、480pxから320pxに切り替えると発生します。これは、注目の画像のサムネイルの下に余分なスペースがあり、その結果、投稿画像と次の投稿画像の間に大きなギャップが生じるためです。これは、ラップトップのブラウザとiPhoneの両方で、横向きから縦向きに回転したときに発生します。

同じ問題は、320pxから480px（iPhoneを縦向きから横向きに回転）に切り替えたときにも発生します。今回は、代わりに画像が重なります。

誰かがこれを引き起こしている可能性があるものを知っていますか？

私はメディアクエリ、PHP、WordPressテーマのカスタマイズ全般に慣れていないので、いくつかの基本的なコーディング要素を見逃している可能性があります。

よろしくお願いします:)

4

1 に答える 1

0

jQuery Masonryプラグインは、スキニーウィンドウに物事をリフローするために、インラインスタイルを<div class="post">sに追加しています。そのプラグインを変更する（または特定の画面幅未満で無効にする）以外に、適切なメディアクエリでこれらのスタイルをハックリにオーバーライドすることができます。このようなものがトリックを行うように私には見えます：

#post-area .post {
    float: left;
    top: auto ! important;
    display: block;
    position: relative ! important;
}

この回答によると、Isotopeプラグインは、メディアクエリのサイズ変更に対してMasonryよりもうまく機能する可能性があります。

于 2012-09-19T18:26:23.180 に答える