ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSレスポンシブレイアウトとは
原因 ますます多くのスマート モバイル デバイス (モバイル、タブレット デバイス) がインターネットに参加しているため、モバイル インターネットはもはや独立した小さなネットワークではなく、インターネットの重要な部分となっています。レスポンシブ Web デザイン (RWD/AWD) の出現は、モバイル デバイスにより良いエクスペリエンスを提供し、Web ページを小型から大型 (現在は超大型) 画面に適応させるテクノロジーを使用して、デスクトップから携帯電話までのさまざまな画面サイズと解像度を統合することを目的としています。異なる解像度の。
注: レスポンシブ Web デザイン = RWD、アダプティブ Web デザイン = AWD、以下同じデザイン
RWD: CSS メディア クエリ テクノロジーの使用
流体レイアウト (流体グリッド)
アダプティブ画像/ビデオおよびその他のリソース素材
(あらゆるサイズの画面スペースを最大限に活用することを目的とした、小、中、大の画面向けの最適化)
AWD: CSS メディア クエリ テクノロジ (限られた数のプリセット画面サイズ向けにのみ設計)
操作には Javascript を使用HTML コンテンツ
サーバー側で HTML コンテンツを操作します (モバイル側のコンテンツを減らし、デスクトップ側に多くのコンテンツを提供するなど)
デザインのアイデア モバイル ファースト (モバイル側から開始、RWD): すべてはモバイルから始まります最小画面側(iPhone の場合は 320px など)から始めて、最初にコンテンツを決定し、徐々に大きな画面向けにデザインします。デスクトップ コンピューターでは常に 1024px から始まる元の Web デザインとは異なります。
以上がCSSレスポンシブレイアウトとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。