;div class="box">
class="box">
ホームページ > 記事 > ウェブフロントエンド > アダプティブ Web ページについて質問していただけますか?卒業プロジェクト緊急_html/css_WEB-ITnose
アダプティブ Web ページについて質問していただけますか?卒業プロジェクト緊急_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:251095ブラウズ
网页如下：在 @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 列のレイアウトになる場合があり、応答性の高いナビゲーションやログインなども別の方法で設計する必要があります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。