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

firefox11 (firefox3.6)

IE7 (少数のユーザー)

IE8 (メインストリーム)

IE9 (最新バージョンを表す)

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

WBOY

リリース： 2016-06-24 11:44:33

オリジナル

1177 人が閲覧しました

説明:

最近、会社が 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 と 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