デスクトップに影響を与えずにモバイルで画像を大きくする方法

以下の方法は基本的に デスクトップとモバイルのビューで画像要素を分けるそれぞれを個別にカスタマイズできます。詳細については、 この記事.

ステップ1: 画像セクションを複製する

• GemPages エディターで、変更する画像を見つけます。
• 画像をクリックして選択します。
• 重複ファイル この画像のコピーを作成する機能。この複製はモバイル バージョンで使用されます。

ステップ2: 表示設定を構成する

オリジナル（デスクトップ）セクション

• 元の画像を選択し、 高機能 左側のサイドバーのタブ。 
• 下 に表示 セクション、 disable 　 タブレット の三脚と モバイル 景色。

この設定により、セクション デスクトップデバイスでのみ表示されます.

複製（モバイル）セクション

• 複製した画像を選択し、 高機能 左側のサイドバーのタブ。 
• 下 に表示 セクション、 disable 　 デスクトップ の三脚と タブレット 景色。

この構成により、セクション モバイルデバイスにのみ表示されます.

• 完了すると、現在編集中なので画像はエディタから非表示になります。 デスクトップ 表示。上部バーの左隅で、表示を切り替えます。 モバイル.

ステップ3: モバイル用に画像サイズを調整する

• モバイルビューエディターに切り替えたら、画像をクリックして設定にアクセスし、下にスクロールして サイズ のセクションから無料でダウンロードできます。

• あなたは フレーム と増加します 幅高さ モバイル ビューで画像の値を希望の寸法に調整します。

画像サイズの変更の詳細については、 この記事.

ステップ4: プレビューとテスト

• GemPages エディターの上部にあるデバイス プレビュー アイコンを使用して、デスクトップ ビューとモバイル ビューを切り替えます。

• デスクトップ上の元のサイズとモバイル上の拡大サイズの両方のバージョンで画像が正しく表示されることを確認します。
• 必要な調整を行う パディング、余白、その他のスタイル設定を使用して、各デバイスで希望する外観を実現します。

詳細については、 レスポンシブWebデザイン GemPagesの可視性設定については、 この記事.