0

私はこのテンプレートを見ています：

http://www.meanthemes.com/theme/daily/photo/

これに似たタイルをサイトに配置しますが、ウィンドウのサイズに応じてタイルを移動する方法がわかりません。私は現在、メニュー項目に最適な MeanMenu ( http://www.meanthemes.com/plugins/meanmenu/ ) を使用していますが、本文の処理方法がわかりません。HTML/CSS/JQuery の超新機能 - どんなポインタでもすばらしいでしょう。

4

2 に答える 2

1

最近の「レスポンシブ」Web サイトのほとんどは、CSS メディア クエリを使用してそれを実現しています。あなたがリンクした Web サイトでさえ、CSS を調べると (他の多くの中でも) 次の行が表示されます。

/* This will define the style you want when the screen's Minimum width is 1024px */
@media screen and (min-width: 1024px) {
 /* style here */
}

@media screen and (max-width: 860px) {
 /* style here */
}

これらのメディア クエリは、ほとんどの最新のブラウザーで動作するはずです。サポートしていないブラウザーについては、この jsを参照して、それを有効にすることができます。

メディア クエリの詳細については、このチュートリアルを試すことができます。

于 2013-03-19T03:16:37.133 に答える
1

ＯＰ、

Twitter Bootstrapは、あなたが探しているものかもしれません。

Bootstrap はレスポンシブ UI を非常にうまく処理します。

Fluid Grid Systemのドキュメントには、より多くの情報と例がありますが、概要は次のとおりです。

流体グリッド システムでは、列幅にピクセルではなくパーセントが使用されます。固定グリッド システムと同じ応答機能を備えているため、主要な画面解像度とデバイスの適切な比率が保証されます。- Bootstrap ドキュメント経由

UI / ナビゲーション バー

レスポンシブ デザインに加えて、Bootstrap には多くの一般的な UI 要素/プラグインが付属しています。MeanMenu (確かに、私には知識がありません) のように、Bootstrap はナビゲーション バーを実行します。

プランカー、共同オンライン編集。

最後に、まだ始めたばかりなので、Plunkerはプロトタイピングやボイラープレートに最適なツールです。コードの質問/回答を SO コミュニティと共有する場合に特に役立ちます。

Bootstrap とレスポンシブ イメージ グリッドとナビゲーション バーの例を含むPlunk > http://plnkr.co/edit/LF6BCCDam2w67aUwOSaqをまとめました。

それが役立つことを願っています。幸運を！

于 2013-03-19T03:30:56.943 に答える