-1

すべてのデバイスをサポートする必要があるテンプレートを試してみるつもりです。それらのほとんどは、グリッド フレームワークを推奨してくれました。これは、メディア クエリを自分で使用すると時間がかかる可能性がありますが、フレームワークを使用すると高速になるためです。それを基礎フレームワークで！そして、これが最善の方法です

*)メディアクエリを自分で書く (または)

*)ファンデーションのようなフレームワークを使用

方法と使用方法を教えてください。事前に感謝します..!

4

1 に答える 1

2

タスクを達成するには、正反対の 2 つの方法があります。

非セマンティック CSS グリッド フレームワークの使用

多数の CSS グリッド フレームワークがあります。それらの中で最も人気のあるものはおそらく次のとおりです。

これらのいずれかを使用する利点は、非セマンティック クラスを HTML 要素に適用することで、グリッドのプロトタイプを非常に迅速に作成できることです。また、便利な装飾スタイルも多数含まれています。

しかし、多くの CSS 開発者は、このアプローチに問題があると考えています。いくつかの問題があります:

  • 非セマンティック クラスを使用すると、構造とプレゼンテーションが混在します。これは、作業を迅速に行うには問題ありませんが、本格的なプロジェクトには受け入れられません。
  • Web サイトでその 10% をほとんど使用していないのに、ユーザーに巨大な CSS ライブラリをダウンロードするように強制します (Foundation では、CSS ライブラリのさまざまな部分を個別にインポートできることを認めなければなりません。装飾スタイルをまったく含まない)。
  • グリッド システムによって提供されるサイズとブレークポイントには制限があります。それらをオーバーライドするエレガントな方法はありません。ほとんどのグリッド システムでは、小さいサイズと大きいサイズの 2 つのレスポンシブ スタイルのみが提供されますが、より多くのスタイルが必要な場合もあります (例: 電話の縦、横の電話、タブレットの縦、タブレットの横、ラップトップ、デスクトップ)。

SASS と Compass の機能を使用する

SASSは CSS を一種のプログラミング言語に変えます。変数、関数、メソッドを使用できます。コードのライブラリを含めて、パラメーターを使用してそれらを実行できます。可能性はほぼ無限です。SASS でスタイルを記述し、すべてのブラウザーで受け入れられるバニラ CSS にコンパイルします。

コンパスは、1 つの名前の下にある一連のものです。

  • SASS を効率的にコンパイルするための便利なツール。
  • あらゆる場面で便利な SASS スタイルの膨大なライブラリ。
  • プロジェクトに簡単にインストールして使用できる拡張機能のエコシステムです。

多くの SASS グリッド フレームワークが存在します。これらを使用すると、要素を意味的に拡張できます。クラスを HTML に追加する代わりに、次のようにします。 

<aside id="sidebar-left" class="grid-2-of-6 grid-4-of-12">

...既存のセレクターに CSS を適用します。例: 

#sidebar-left { @include float-span(2); }

もう 1 つの利点は、デフォルトに制限されないことです。列の数、幅、ブレークポイントを変更できます。Web ページの異なる部分に異なるグリッドを使用することもできます! そして、最もおいしい機能は、異なる画面幅に対して異なる数の列を持つことができることです (単に列を途方もなく狭くするのではなく)。

私の意見では、最高の SASS グリッド システムはSingularityレスポンシブ グリッド フレームワークです。それは非常に強力で柔軟性があり、同時に非常にスムーズで使いやすいです (一度勉強すれば)。

レスポンシブ メディア クエリの場合、Breakpointまたはジェット推進のサイドキックであるBreakpoint Slicerを使用できます。Singularity と Breakpoint Slicer を使用してレスポンシブ グリッドを構築するのは楽しいことです。

SASS と Compass には、他にも素晴らしい利点があります。たとえば、コードを非常に効率的に構成できます。SASS と Compass があなたの生活をより良くする方法をすべて説明するのは適切な場所ではありません。SASS と比較した CSS はコピーブックのようなものであり、スプレッドシート プロセッサと比較したそろばんのようなものです。詳細については、SASS をグーグルで検索することをお勧めします。

SASS アプローチの欠点は次のとおりです。

  • あなたはそれを勉強する必要があります。時間がかかる。
  • スタイルを SASS に保持する必要があります。CSS を編集する場合は、SASS を編集して再コンパイルする必要があります。これはそれほど面倒なことではありません。これを自動化したり、デプロイ プロセスに統合したりする方法もありますが、それらを採用するには時間と労力がかかります。
  • CSS の変更はコンパイルごとに上書きされるため、チームメイトも SASS を使用する義務があります。
  • SASS を使い始めると、バニラの CSS をコーディングする必要がなくなります。それは実際には本当の欠点ではありません。しかし、フロントエンド開発者としてのあなたの人生は決して同じではないことに注意してください!
于 2013-04-26T07:42:54.483 に答える