アバダのテーマデフォルトだけでなくレスポンシブ?レイアウトに対応。また、以下のような內(nèi)蔵機(jī)能も充実している。柔軟な制御システムAvadaは、さまざまなデバイスの畫面に簡単に対応できるWebアプリケーションです。この記事では、Avadaのレスポンシブ機(jī)能の仕組みと、デスクトップ、タブレット、モバイルで優(yōu)れたパフォーマンスを発揮するウェブサイトを構(gòu)築するための設(shè)定方法について詳しく説明します。

I. アバダのレスポンシブ?デザインの特徴

アバダ、そうだ。完全レスポンシブテーマすべてのレイアウト、モジュール、エレメントは異なるデバイスで利用可能です。自動適応.これに加えて、以下の機(jī)能をサポートしている：

• グローバルなレスポンシブ設(shè)定(ブレークポイントの制御、ズーム、フォントの拡大縮小など）
• 要素レベルのレスポンシブ設(shè)定(異なるデバイス用に個別にスタイル設(shè)定可能）
• リアルタイム?レスポンシブ?プレビュー(デバイスを切り替えずに効果を見ることができます）
• レスポンシブ畫像読み込みメカニズム(畫面に最適なサイズの畫像をロードします）

アバダ?レスポンシブ?オプション

パス： Avada > オプション > レスポンシブ

1.レスポンシブ?デザイン

このオプションはデフォルトでオンになっています。 オフにすると、ページの幅が固定され、適応機(jī)能が失われます。通常はオンのままにしてください。

2.4大ブレークポイントのコントロール（ブレークポイント）

これらのブレークポイントは、異なる畫面幅でページがレイアウトを切り替え始めるタイミングを制御する：

ブレークポイントの種類	機(jī)能説明
グリッド?レスポンシブ?ブレークポイント	グリッドタイプのコンテンツ（ブログやポートフォリオなど）をシングルカラムレイアウトに分割する際のコントロール。
ヘッダー?レスポンシブ?ブレークポイント	従來のヘッダーがモバイルメニューに切り替わるタイミングを制御することは、オプションベースのヘッダーにのみ適用されます。Avada Layoutsで構(gòu)築されたヘッダーは影響を受けません。
サイト?コンテンツ?ブレークポイント	メインコンテンツエリアがマルチカラムレイアウトからシングルカラムレイアウトに変わるタイミングを制御する。
サイドバー?レスポンシブ?ブレークポイント	小さな畫面でサイドバーがディスプレイの下に移動するタイミングを制御します。これは古い設(shè)定なので、代わりにSticky Columnsを使用することをお勧めします。

3.モバイル?デバイス?ズーム

封じ込めモバイルデバイス2本指によるページコンテンツのズームを許可するかどうか。一般的に、ユーザーエクスペリエンスを向上させるためにオンにすることを推奨します。

4.小畫面と中畫面のブレークポイント値をカスタマイズする

中畫面」と「小畫面」の開始ピクセル値を設(shè)定できます。

例

• 畫面中央の始點(diǎn)：1100px
• スモールスクリーンの開始點(diǎn)：800px

これらの値は、レスポンシブプレビューと要素の表示ロジックに直接影響します。

5.レスポンシブフォントサイズの設(shè)定

• レスポンシブ?タイポグラフィの感度コントロール見出しフォント小さい畫面でのサイズ縮小速度。値が大きいほど、モバイルでのフォント縮小速度が速くなる。0 はフォントのスケーリングを無効にする.
• 最小フォントサイズ係數(shù)
  • 最小フォントサイズの倍數(shù)を制御する：
    • 0に設(shè)定：フォントの最小値制限なし
    • 1に設(shè)定：最小フォント＝現(xiàn)在のフォント
    • 2に設(shè)定：最小フォント＝現(xiàn)在のフォントの2倍

この2つのパラメータを使えば、階層構(gòu)造を失うことなく、モバイルでも読みやすいフォントを維持することができる。

III.カラムレイアウトのレスポンシブな動作

パス: Avada Builder > コンテナ > カラム設(shè)定

Avada Builderでは、各カラムモジュールに異なるスクリーン次の幅。デフォルト：

• 中畫面は大畫面の列幅を継承
• 小さな畫面は自動的に全幅に設(shè)定される（100%）

また、特定の列を編集することもできる：

1. カラム」設(shè)定をクリックする。
2. レスポンシブ表示に切り替える（左上のアイコン）
3. 1/4、1/2、1/1など、大?中?小スクリーン用に異なるカラム幅を設(shè)定する。

IV. Avada Builderレスポンシブ?プレビュー

ページデザインにAvada Builderを使用する場合、ツールバーに「レスポンシブ?ビュー?アイコン」があり、クリックすることで異なるデバイス?エミュレータを切り替えることができます：

• ラージ（デスクトップ）
• ミディアム（フラット）
• 小型（攜帯電話）

異なるスクリーンでコンテンツを編集する場合、Avadaはそのサイズの「レスポンシブ設(shè)定セット」を有効にします：

• で、各デバイスのエレメントを個別に設(shè)定することができます。マージンそして書體そしてアライメントそして幅他
• の他のサイズには影響しません。オープニング互いに獨(dú)立している。

一般的な最適化の推奨事項(xiàng)

• マルチカラムレイアウトは小さなスクリーンにはお勧めできません。1段積みレイアウトへの変更を提案
• モバイルコンテンツは長すぎてもいけない。核となるメッセージは、最初の畫面か2畫面以內(nèi)に表示する。
• レスポンシブなフォントとボタンサイズユーザーがどれだけ簡単に指をクリックできるかをテストする必要がある。
• レスポンシブプレビューを使用して、各ページ、各コンテンツブロックを繰り返しテストします。異なるサイズでのパフォーマンス

概要

Avada のレスポンシブ機(jī)能はデフォルトで有効になっているだけでなく、完全な設(shè)定オプション、デバイスシミュレーションプレビュー、モジュールレベルでのレスポンシブ設(shè)定も提供します。単純な自動適応であれ、デバイスによって異なるコンテンツの複雑な制御であれ、Avada ではコードを書くことなく簡単に行うことができます。詳しくはアバダ?テーマ?チュートリアルをご覧ください。光子ゆらぎネットワークWordPressのチュートリアルや情報(bào)が毎日更新されています。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時間: 月～金、9:30～18:30、祝日休み