この投稿では、メディア クエリを実装するために必要なガイドラインについて説明します。

モバイルデバイス用のメディアクエリを実装するにはどうすればよいですか?

メディア クエリは、「」と言及するだけでモバイル デバイスに適用できます。 @メディア ”タグを使用し、小括弧内に画面サイズを指定します。そのメディア クエリの CSS を中括弧内に追加できます。画面サイズがユーザーが指定したサイズを満たすたびに、指定されたメディア クエリが適用されます。

モバイル デバイス向けのメディア クエリの実装を学ぶための実践的な例を概観してみましょう。

例: メディア クエリを適用して 2 列レイアウトから 1 列レイアウトに変更するレイアウトを作成する

以下の例では、Web ページのレイアウトが列レイアウトから単一列レイアウトに変更されます。

ステップ 1: HTML 構造を作成する

• まず、HTML ファイルを作成し、そのファイル内に外部 CSS スタイルシート ファイルをリンクします。 <頭> セクション。
• 次に、 <ヘッダー> セクションを開き、

  鬼ごっこ。

• を作成します
  クラス名「container-class」とその中にあるさらに 2 つの

  のクラス名は「 カラム ”。

ステップ 2: CSS を適用する
ボディセクション:

• まずボディセクションを「」と記述して指定します。 体 ” タグと中かっこについての言及。
• 中かっこ内で、フォント ファミリ、背景色、マージン、およびパディングを指定します。

で <ヘッダー> セクション：

• テキストの色、テキストの配置、背景色、パディングを指定します。

で 「コンテナクラス」 ディビジョン:

• をセットする ' 画面 ” プロパティ値を “ フレックス 」をクリックしてフレックスボックスを作成します。
• 使用 ' コンテンツの正当化 」を使用してコンテンツ間にスペースを追加し、パディングを追加します。

列クラスについて:

• まず、「」に記載の値を指定します。 フレックス 」プロパティを使用して、2 つのレイアウト セクションの間にスペースを追加します。
• その後、背景色、境界線、パディング、ボックスのサイズを追加します。

ステップ 3: メディア クエリを適用する

• モバイル デバイスにメディア クエリを適用するには、まず「」を追加します。 @メディア ' 鬼ごっこ。
• 次に、値「」を指定します。 768ピクセル モバイルデバイスに典型的な「」から「 最大幅 ” 小さな中括弧内のプロパティ。
• その後、「」を指定します。 カラム ” の値を” フレックス方向 ” に適用されるプロパティ コンテナクラス」クラス。これにより、指定された画面サイズが検出されるたびに、2 つの列が 1 つの列に変更されます。
• 最後に「」にCSSを適用します。 カラム ” クラスを指定し、” マージン ' そして ' フレックス ” 値:

出力
以下は、メディア クエリを適用した後の Web ページの出力です。この出力は 2 列のレスポンシブ レイアウトです。

モバイル用のメディア クエリを使用して画面が指定されたサイズを満たすと、画面は 1 列のレイアウトに変わります。

結論

モバイル デバイス用のメディア クエリを実装するには、まず「」を含めます。 ビューポート ' の中に ' 頭 ' セクション。次に、モバイルデザイン固有の CSS を作成します。その後、「@media」タグを使用し、モバイルの画面サイズを指定してメディアクエリを追加します。たとえば、タブレットの場合は 768 ピクセル、携帯電話の場合は 480 ピクセルを指定します。この記事では、モバイル デバイス向けのメディア クエリを実装する手順について説明しました。