アダプティブ Web ページについて質問していただけますか?卒業プロジェクト緊急_html/css_WEB-ITnose

网页如下：在 @media screen and (max-width: 980px)等的那几个规则里该怎样写 可以做到随着 网页宽度的改变，DIv:content里的DIV：box能够适应网页大小而改变大小？？

Header

    

;div class="box">

class="box">

フッター

ディスカッションへの返信 (解決策)

幅はパーセンテージで表されます。

@media screen を使用しているため、適応とは幅をパーセンテージに変更するだけです。 (max-width: 980px ) 次にレスポンシブ開発を行いたいとします。この場合、非常に使いやすいブートストラップ フロントエンド フレームワークを検討することをお勧めします。

作成者は H5、、、幅のパーセンテージのみを使用できます。 。 。

http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html

アダプティブ [フロー レイアウト] は、一般的な [レスポンシブ レイアウト] とは異なります。

フロー レイアウトは CSS2 時代に存在し、ブラウザの幅が変更されたときにページ レイアウトを基本的に変更しないようにパーセンテージ レイアウトを使用していました。

しかし、当時はモバイルデバイスがそれほど多くなかったため、いわゆる一般的なディスプレイサイズへの適応でした。

[レスポンシブ レイアウト] の中心的な考え方は、異なる解像度のデバイスに適切なレイアウトを提供することです。つまり、大きな画面は大きな画面のように見え、小さな画面は小さな画面のように見えます。つまり、少なくとも3つのレイアウト設計を行って@mediaに記述する必要があります。 例: 解像度が 980 を超える場合 (通常はコンピューター画面)、大きな画像を 1 列、左、中央、右の 3 列などで使用できます。 700~979の場合は、おそらく画像が小さく、列が左右に2列になっています。 小さいモバイル画面では 1 列のレイアウトになる場合があり、応答性の高いナビゲーションやログインなども別の方法で設計する必要があります。