レスポンシブ Web デザインのエクスペリエンス Sharing_html/css_WEB-ITnose

アダプティブ Web デザインとも呼ばれるレスポンシブ Web デザインでは、Web サイトがさまざまなサイズのデバイス上で最も合理的で美しいレイアウトを表示できるようになり、モバイル端末時代のさまざまなモバイル デバイス所有者のニーズを満たすことができます。 Web を閲覧することで、Web サイト訪問者のユーザー エクスペリエンスを効果的に向上させることができます。

レスポンシブ Web デザインの概念が提案される前は、Web サイト作成者は 2 つの Web サイト プログラムを用意するのが一般的で、1 つは Web ユーザーがアクセスするもので、もう 1 つは WAP ユーザーがアクセスするものでした。 。このようなソリューションは比較的複雑で、2 セットのプログラムを保守するのは簡単ではありません。多くの CMS Web サイト構築プログラムは Web サイトと WAP Web サイト間のデータ同期を効果的に保証できますが、これが問題を解決する最善の方法であるとは限りません。モバイル端末時代が徐々に発展し、さまざまなサイズのモバイル デバイスが誕生するにつれて、元の 2 つのプログラムでは明らかにさまざまなモバイル デバイスを満たすことができなくなり、この問題を解決するためにレスポンシブ Web デザインが誕生しました。

Code Jun Web サイトは最近レスポンシブ レイアウト デザインのテスト段階にあり、現在、この Web サイトの主要なモジュールはレスポンシブ レイアウト デザインを基本的に完了しています。ブラウザ ウィンドウから外して、デバイスでこのサイトを閲覧するときに表示されるさまざまなサイズの効果を体験してください。

実際、Yuan Chengxu 自身も、これ以前はレスポンシブ レイアウト デザインの使用にかなり嫌悪感を持っていました。なぜなら、中小規模の Web マスターの主な収入が Web サイトに掲載されるサードパーティの広告から来ていることを Web マスターは皆知っているからです。 。レスポンシブレイアウトのデザインは美しいですが、固定サイズの広告スペースの配置に影響を与えます。当初、Yuan Chengxu は最も昔ながらのアプローチを採用し、コード マスター Web サイトに WAP バージョンを追加することを計画していましたが、残念ながらテスト結果は常に満足のいくものではありませんでした。最終的に、このサイトはレスポンシブ レイアウト デザインを採用しました。この問題をどのように解決したか見てみましょう。

レスポンシブ Web デザインは、固定サイズの広告スペースの問題をどのように解決しますか?

実際、解決策は非常に簡単です。これは、Code Master Web サイトのレスポンシブ デザイン テスト中に Yuan Chengxu が要約したものです。まず、最も独創的な Web サイト プログラムのセットをコーディングおよびデザインしたい方法でコーディングします。たとえば、このサイトがレスポンシブ レイアウトを使用していない場合、幅 1100 ピクセルの固定サイズの Web ページでした。閲覧者が保持するデバイスの幅が 1100 ピクセルより大きい限り、このサイトのすべてのモジュールを使用できます。正常に表示されます。こう考えると、1100px以下のデバイスに対してはレスポンシブコーディング設計を行えばよいということは非常に単純です。

このメタ タグを に追加すると、ページがモバイル ブラウザで元のサイズで表示され、ズームできないようになります:

次に、CSS3 ベースのメディア クエリ機能を使用して、画面幅が 1100 ピクセル未満のデバイスを分類します。一部のモジュールのスタイルは、レスポンシブ Web レイアウト デザインの要件を満たすように書き直されました。通常の状況では、Web サイト上で書き換えが必要なモジュールは、ナビゲーション バーと Web ページの右側のモジュールにすぎません。オーバーライドされたスタイルでは、絶対幅のレイアウトや絶対幅の要素の使用を避ける必要があることに注意してください。

複雑そうに聞こえますが、実際はそれほど難しくありません。簡単にまとめると、閲覧者が保持しているデバイスの幅が Web サイトで元々設定されている固定幅より大きい場合、逆にデバイスの幅が Web サイトの幅より小さい場合、レスポンシブ レイアウト コードは無視されます。 、ユーザーエクスペリエンスを向上させるには、対応するモジュールのコードをスタイルに書き換えて、ケースバイケースで実装する必要があります。

これが非常に複雑な理由は、Web サイトの広告スペースを考慮するためです。収益を得るために Web サイトがわざわざサードパーティの広告を掲載しない場合は、この記事で説明したすべてを無視して、アダプティブ レイアウトを使用してください。コーディングの最初から設計するだけです。もちろん、将来固定サイズの広告スペースを追加するかどうかわからない場合は、Web サイトをコーディングするときに次のメソッドを使用できます。

1. メインの幅を制御する外側の div。 Web ページの本文は固定ピクセルに制限されます。

2. 内部モジュールに対応する div は、外側のサイズを最初に設定されたサイズで除算した後のパーセンテージとして設定できます。このようにすると、後で Web サイト プログラムをレスポンシブ レイアウトに変更したいときに、外側の div の固定ピクセルをパーセンテージ形式に変更し、いくつかのモジュールのスタイルを書き換えるだけで、アダプティブ Web ページ レイアウトを簡単に実装できます。

出典: Code Jun (daimajun.com) | この記事の共有を歓迎します。転載する場合は出典を明記してください。