レスポンシブレイアウトとブートストラップ(例)_html/css_WEB-ITnose

説明:

最近、会社が Web サイトにレスポンシブ レイアウトを実装することを要求しているため、私はレスポンシブ レイアウトについて比較的包括的に理解しており、いくつかの例を作成しました。

レスポンシブ レイアウトの紹介

参考: Wikipedia、CSS3 @media query、Bootstrap 中国公式 Web サイト、Despise IE、2014 年に最も人気のある 5 つのフロントエンド フレームワークの比較、アダプティブ Web デザイン - Ruan Yifeng、レスポンシブWeb ページのデザイン、レスポンシブ レイアウト - Baidu 百科事典、レスポンシブ Web サイト デザインの原則、レスポンシブ レイアウトのちょっとしたこと、レスポンシブ Web デザインの新しい原則、レスポンシブ レイアウト デザインとは? , アダプティブとレスポンシブの違い、財団中国語ウェブサイト

レスポンシブ レイアウトとはどういう意味ですか?

レスポンシブ レイアウトでは、ズーム、パン、スクロールを軽減しながら、さまざまな閲覧デバイス (PC、タブレット、スマートフォンなど) に応じてさまざまな Web ページ レイアウトを表示できます。

モバイル端末の一般的な傾向に適応し、ユーザーエクスペリエンスを向上させ、開発コストを削減します。

なぜレスポンシブ レイアウトを使用するのですか?

主に、Web ページをモバイルデバイスに適したものにするため、画面の解像度が最大の互換性の問題です。

デバイスごとに異なる Web サイトを提供できます。つまり、同じ Web サイトに通常の PC ページとモバイル ページの両方を含めることができます。初期の開発であっても、後のメンテナンスや修正であっても、非常に面倒です。

レスポンシブ レイアウトの欠点?容兼

互換性のあるコード、大きなワークロード

設計原則?どのようなプロジェクトに適していますか?

下位互換性があり、モバイルファースト。

非常に複雑な Web ページ レイアウトの場合、Web ページ アダプティブ レイアウトには適していません。その理由の 1 つは、実装コストが高すぎることです。第 2 に、複雑なページ (Rongshang.com のホームページなど)。 China Enterprise Cluster など) はモバイル閲覧には適していません。

他のレスポンシブ レイアウト フレームワークは?

Prue フレームワークは Yahoo の軽量フレームワークで、IE7 以降と互換性があり、パフォーマンスも優れていますが、中国語のドキュメントが少なく、チーム開発には適していません。

ZURB による財団、Bootstrap に次ぐ、ヘビーウェイト、362K サイズ

Bootstrap の利点 ?学習コストの学習コスト

bootstrap.min.min.js 35.1kドキュメント、およびビデオチュートリアルのフルセット 迅速な開発のために、

ブートストラップスイッチ、Sco.js、フラット UI など、選択できるコンポーネントが多数あります

互換性のある性別

サポートされている サポートされている N/A サポートされていない N/A サポート 該当なしサポートなし サポートW o Windows プラットフォームは IE8 をサポートします。フレームワークを使用しない場合は、IE9 以降をサポートする必要があります。プラグイン BSIE (contempt) を通じて IE6 と互換性を持たせることができます。

レスポンシブ レイアウトの例

レスポンシブ ページのアドレス例

http://xys.laiwanapp.com/bootstrap-1/

http://xys.laiwanapp.com/bootstrap-2/

http: //xys.laiwanapp.com/bootstrap-3/

互換性の問題 (解像度の内訳 - *~768 携帯電話、768~992 タブレット、992~1200 普通の PC、1200~* 大画面 PC)

Chrome Firefox Internet Explorer Opera Safari	Android
	iOS
	Mac OS サポートされています		サポートされていません

例 1 - Weibo （ 四捨五入背景サイズ属性なし) NoneNoneNone クラッシュ例 3-ブログ角丸エラー角丸なし、進行状況バーのアニメーションなし (角丸なし、進行状況バーのアニメーションなし)なしなしなしクラッシュその他

chrome18	firefox11 (firefox3.6)	IE7 (少数のユーザー)	IE8 (メインストリーム)	IE9 (最新バージョンを表す)	IE6
					册

説明

Chrome18 と Firefox は両方とも古いバージョンであり、ユーザーが非常に少ないです。

背景属性はありません。サポートされており、position 属性と z-index 属性で解決できます

IE6 のクラッシュのほとんどは、Bootstrap 用プラグイン Bsie を使用して解決できますが、IE6 のサポートが必要ない場合、推奨されず、パフォーマンスに影響します

下の写真は、角が丸い、通常の角が丸い、および間違った角が丸いことを示しています。角が丸いのは CSS3 属性であるため、互換性の問題がありますが、IE7 以降でサポートされており、すでに非常に優れています (w3school によると)。 IE9 以降でのみサポートされており、CSS ハックの使用方法についても説明しています。

概要: 主流のブラウザをサポートしており、古いバージョンのブラウザとの互換性の問題はほとんどありません。

その他の改善点

モバイルテスト 互換性の問題 (解像度分解 -

) 1. *~768 携帯電話、1 列

2. 768 ~992 タブレット 、2 列

3. 992~1200 通常の PC

、2 列

4. 大画面 PC

、3 列		)
解像度 dpi	ppi	モデル	垂直	水平
2560x1536	546	MX4 プロ	1	1
720x1280		Huawei Honor 3c	1	1
1200x1920		Huawei x1 7.0	1	2

🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜

今はタブレットがないのでテストする方法がありません。

また、2560x1536 の解像度では 3 列しか表示できない理由がわかりません。dpi と ppi の意味がわかりません。知っている人は回答していただければ幸いです。 ^_^