今、私たちの開発世界にはますます多くのフレームワークが登場しています。この記事では、Web プログラマーに適したレスポンシブ フレームワークをいくつか紹介します。この記事の内容を通じて、あなたに合ったフレームワークをたくさん見つけていただければ幸いです。
HTML5 と CSS3 の継続的な人気に伴い、レスポンシブ デザイン フレームワークの人気はますます高まっており、ウェブマスターやデザイナーの間でますます人気が高まっています。しかし、レスポンシブ フレームワークに対する世間の態度や見解は異なります。HTML5 と CSS3 を理解しているプロのデザイナーがフレームワークを自分で作成して独自の Web サイトを作成する必要があると考える人もいます。デザイナーは、時間とエネルギーを節約するために不可欠な実用的で美しい Web サイトを迅速かつ効果的に構築できます。この議論に関して、Xiaofei は依然として後者の観点を支持しています。 Xiaofei は、経験豊富な Web フロントエンド開発者であっても、レスポンシブ フレームワークを研究する必要があると考えています。このフレームワークは、今日の急速な発展の時代において、Web サイトを構築するためのフレームワークを作成する必要があります (グリッドを適切に配置する)。レイアウトとメディア クエリ )時間がかかりすぎます。さらに、デザイナーはレスポンシブ フレームワークを使用し、一部の機能をカスタマイズし、革新的な Web サイトを作成するときに創造性を最大限に発揮することもできます。今日は、デザイナーがよく使用するレスポンシブ フレームワークをいくつか紹介します。実際のニーズに基づいて使用することができます。
Bootstrap
Bootstrapは、Twitter社が立ち上げたフロントエンド開発用のオープンソースツールキットであり、現在最も人気のあるHTML5フレームワークであり、最大のユーザーベースと最も高い認知度を持っています。国で。 Bootstrap のスローガンは、「シンプル、直感的、強力で、Web 開発をより速く、より簡単にする」であり、実際にこれを達成するために努力しています。基本的に、Bootstrap エディター、カスタマイズされた jQuery プラグイン、カスタム フォーム要素、JavaScript の対話性、ブラウザ間の互換性などの複数の機能を実装します。ほとんどの Web マスターにとって、Bootstrap は便利でシンプルであり、美しく応答性の高い Web サイトを非常に速く構築できます。 Xiaofei もそのファンです。テイクオフ ページにあるセルフサービス Web サイト構築プラットフォームの優れたテンプレートの多くも、Bootstrap フレームワークに基づいて作成されています。
ただし、Bootstrap は完璧ではありません。 Bootstrap は Chrome、Firefox、Safari、Opera、360、Sogou などの複数のブラウザと互換性がありますが、HTML5 と CSS3 に基づいて開発されているため、一部の機能は IE ブラウザにあまり優しくなく、IE ブラウザでは次のような問題が発生する可能性があります。表示できないこと。また、Web サイトにカスタマイズされたデザイン コンテンツが多すぎる場合、変更用のフレームワークの最下層としてブートストラップを使用すると、通常、多数のスタイルをコピーする必要があり、CSS レベルで混乱が生じる可能性があり、後のメンテナンスに役立ちません。ウェブサイト。
Foundation
Foundationは、柔軟なグリッドに基づいており、最新のテクノロジーを採用しており、高度なレスポンシブフロントエンドフレームワークの代表となっています。全体的なフレームワーク設計コンセプトはモバイルファーストであるため、携帯電話などのモバイルデバイスでのパフォーマンスが向上することが優れた特徴の 1 つです。同時に、Foundation はユーザーがカスタマイズされたサービス (グリッド、色、フォント サイズなどの定義) を使用できるようにサポートし、フォーム、ボタンなどのさまざまな Web UI コンポーネントを提供し、操作と使用において十分な柔軟性を備えています。 。 。広く使用されている Bootstrap と比較すると、Foundation は中国語のドキュメントやチュートリアルが不足しているため、中国では比較的目立たありません。しかし、多くの Web マスターは、Bootstrap フレームワークを使用して Web サイトを構築する人が多すぎると考えています。作成する Web サイトはどれも同じように見えますが、型から彫り出した Web サイトを競合他社の中で目立つようにすることは不可能です。現時点では、Foundation を使用して縦長でユニークな Web サイトを作成する傾向があります。ただし、このフレームワークには、互換性の問題という独自の欠点もあります。 4 は IE8 との互換性を放棄しましたが、Foundation の動作が良いのか悪いのか、Xiaofei は簡単に結論を下すことはできません。
Golden Grid System
グリッドシステムに興味があるなら、Golden Grid システムは最適な選択でなければなりません。最初は 16 列のグリッドとして表示されますが、これを折りたたんで、タブレットやモバイルで表示するためにビューポートを 8 列または 4 列のレイアウトに縮小することもできます。要約すると、これは Web デザインの互換性を高めるために設計された折りたたみ可能なグリッドであり、列、クロスページ、ボトムライン、スクリプトという 4 つの明らかな特徴があります。ゴールデンを使用する グリッド システム フレームワークには、Web サイトを構築する際に多くの利点があります。たとえば、明確で規則的なレイアウトを確立し、Web ページの読みやすさを向上させ、Web デザイナーとフロントエンド開発者のコミュニケーションを容易にすることができます。応答性を実装し、さまざまな画面サイズに適応させることができます。メリットがたくさんあるので、まだ興奮しませんか?
フレームワークの削減
少なくする Framework は、古典的なレスポンシブ フレームワークの 1 つで、コンピューター、タブレット、携帯電話などのさまざまなウィンドウのニーズを満たす 4 つのレイアウトと 3 つのフォント プリセットをカバーするアダプティブ CSS グリッド システムです。少ない フレームワークは単一のグリッドに基づいて動作し、レイアウト列の数と外縁の幅を変更してさまざまなレイアウトを作成します。 CSS は非プログラミング言語であるため、多くのデザイナーにとって困難でしたが、Less の登場により、CSS コードの記述が大幅に簡素化され、Web ページのメンテナンスコストが削減され、デザイナーはより少ないコードでより良い Web サイトを作成できるようになりました。これは、その名前の響きがそれほど大きくなく、多くのデザイナーがこのフレームワークに夢中になるのも不思議ではありません。
Gumby
レスポンシブ Web サイト デザインの初心者であれば、Gumby フレームワークは間違いなく開始するのに適した場所です。 Gumby は、SASS (CSS 拡張言語パーサー) に基づくレスポンシブ CSS フレームワークであり、テンプレートと Web が付属しています。 さまざまな美しいボタン、テーブル、ナビゲーション、ラベル、JS ファイル、および高速応答速度を備えた UI ツールキット。ノーコーディング設計にも対応しており、技術がわからなくても操作が非常に簡単で簡単に始められ、その後のメンテナンスにも支障がありません。
320 および UP
このフレームワークは、まず小さな画面向けであり、Web サイトのコンテンツの優先順位を確保するために、色やレイアウトなどのいくつかの設定を含む小さな画面のスタイル シートを使用します。小さな画面にもよく適応し、大きな画面でも問題ありません。
1140px CSS グリッド システム
レスポンシブ Web サイトは、低解像度のデバイスのニーズを満たすことを意味するだけではなく、より大きな解像度のレイアウトに適応しながら、一般的なコンピューター画面でも適切に表示される必要があります。 1140 グリッド フレームはこれを実現し、解像度 1280 のディスプレイに完全に適合します。小さいディスプレイでは、ブラウザの幅に基づいて流動的になり、閲覧ウィンドウに適応します。
上記の内容は、一般的に使用される Web レスポンシブ フレームワークに関するものです。さまざまなフレームワークにはそれぞれ長所と短所があります。この記事の共有が皆様のお役に立てれば幸いです。
関連する推奨事項: