CSSフレームワークの使い方

CSS フレームワークを使用する手順: 1. メタを設定する; 2. CSS フレームワークのコードを引用する前に基本的な CSS を参照する; 3. CSS フレームワークのメイン CSS を参照する; 4. 必要なフレームワーク CSS を参照する。

CSS フレームワークは、カスケード スタイル シート言語を使用して、より簡単で標準に準拠した Web デザインを可能にする、事前に準備されたソフトウェア フレームワークです。これらのフレームワークのほとんどには、少なくとも 1 つのグリッド デザインが含まれています。

CSS フレームワークを使用する手順:

1. メタを設定します。

2. CSS フレームワーク コードを引用する前に、基本的な CSS を参照してください。

3. CSS フレームワークのメイン CSS を参照します。

4. 必要なフレームワーク CSS を引用します。

CSS フレームワークの使用を説明するために、pure を例に挙げます:

最初のステップ:

メタを設定する

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0;
 maximum-scale=1.0; user-scalable=0;" />

2 番目のステップ:

基本的な CSS を参照します。つまり、pure を参照するすべてのコードの前に、CSS を導入する必要があります。

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/base-min.css">

3 番目のステップ:

pure のメイン CSS を参照します。

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/pure-min.css">

ステップ 4:

必要な純粋な CSS を導入します。ここでは、レスポンシブ レイアウトから始めましょう:

<!--[if lte IE 8]>
<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->

推奨学習: css ビデオ チュートリアル

以上がCSSフレームワークの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。