web-dev-qa-db-ja.com

パネルレイアウトを自動的にレスポンシブにする方法が必要です

この質問をする前に、私は数回謙虚なGoogle調査を行いましたが、この問題の効率的な解決策を見つけることができませんでした。私は実用的な答えをコミュニティの恵みであると考えています:

これまでのところ、私は自分のサイトに多くのパネルを設置していませんでした(たとえば、サイトあたり1〜2枚のミニパネル+ 1パネルページにすぎません)。各パネルをブロックごとの要素で応答可能にしました。あなたのサイトに多くのパネルがある場合、それはしばらく時間がかかるかもしれません、そしてそれは効率的な解決策ではありません...

したがって、このプロセスを自動化する方法を探しています-パネルレイアウトを手動でレスポンシブにする代わりに、方法が必要です(多分一般的なCSSコードピースでなくてもモジュール)ちょうど私のパネルレイアウトが応答することを確実にするために、そして例は次のようになります:

幅の代わりに:50%+ 50%または33%+ 33%+ 33%float\text-align:right\left、すべて中央揃えになります)。

では、サイトにあるすべての既存のパネル(これから登場するすべてのパネルを含む)を「自動応答」するにはどうすればよいでしょうか。

1
JohnDoea

私はあなたが箱から出して行くのに最も近いものだと思います Panels Extra layouts 、これはアダプティブレイアウトの束とともに出荷されます。

それ以外は、それぞれのテンプレートを使用して、一連のカスタムレイアウトを自分で作成することをお勧めします。ドキュメントはそのために悪いことではありません。あなたはそれをここで見つけることができます: パネル3:テーマでカスタムレイアウトを作成する 。または、Panelsコードベースで実装を確認してください。

3
Chapabu

Zen5ベーステーマには、レスポンシブなモバイルフレンドリーグリッドシステムであるZenGridが付属しており、独自のパネルレイアウトがあると思います。

実際、私は現在のリリースを確認しましたが、1つのパネルレイアウトがありますが、あなたが探しているものではありません。また、ペインおよびパネルページのテーマのオーバーライドもいくつかあります。

レスポンシブレイアウトを使用するのはPanelsモジュールの役割ではありません。パネルの組み込みレイアウトは、「行」の概念に基づいています。テーマはHTMLを取得し、それらの行をスタックに変換する必要があります。禅は始めるのに良い場所です。そして、それらの行をボックスからスタックする可能性があります。たとえば、responsive.scssファイルzen/STARTERKEIT/sass/layouts

0
Queenvictoria

Panels bootstrap layouts module。モジュールを使用する方法があります。モジュールはBootstrapレイアウトをパネルに追加します。これはBootstrapグリッドをベースとして、列の独自の設定を定義できます。

0
hene