Bootstrap 3 でレスポンシブ レイアウトにメディア クエリを使用するにはどうすればよいですか?

Twitter Bootstrap 3 でのレスポンシブ レイアウトのためのメディア クエリの利用

Bootstrap 3 では、メディア クエリはレイアウトを多様な画面に適応させる上で重要な役割を果たしますサイズ。たとえば、画面の幅に基づいてフォント サイズを調整することができます。メディア クエリを使用してこれを実現する方法は次のとおりです。

Bootstrap 3 のメディア クエリ セレクター

特定の画面サイズをターゲットにするには、次のセレクターを利用します。

• @media(max-width:767px): 最大幅が 767px の画面767px
• @media(min-width:768px): 最小幅 768px の画面 (タブレットと同等)
• @media(min-width:992px): 最小幅の画面992 ピクセル (ラップトップ)
• @media(min-width:1200px):最小幅 1200 ピクセルの画面 (大型デスクトップ)

フォント サイズの調整

画面サイズに応じてフォント サイズを調整するには、適切な範囲内で CSS ルールを使用します。メディアクエリ。例:

@media (max-width: 767px) {
  body {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
}

注:

Bootstrap 3 には、デバッグに役立つ非表示のクラスがあることに注意してください:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

以上がBootstrap 3 でレスポンシブ レイアウトにメディア クエリを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。