CSS メディア クエリ

メディア クエリは、レスポンシブ Web デザインに非常に役立ちます.誰もが常にデスクトップを使用しているわけではありません.私たちのほとんどは、おそらくほとんどの時間、オンラインで行っていることのために電話を使用しています. Using media queries is a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones). メディア クエリを使用すると、デバイスのサイズに応じて CSS を変更できます.また、携帯電話でサイトにアクセスしたことがあり、ランディング ページの情報を表示するためだけに無限にスクロールしなければならなかったことがあるなら、それがどれほどイライラするかがわかります.

開始するには、指定されたメディア タイプをターゲットにするために使用される @media ルールを使用します.構文は次のようになります.

@media (condition) {
  // CSS that we want to happen when the condition is met
}

たとえば、誰かがデスクトップではなくモバイル デバイスを使用しているときにフォント サイズを変更して小さくしたい場合は、次のようなメディア クエリを使用します.

p {
  font-size: 25px;
}

@media (max-width: 375px) {
  p {
    font-size: 18px;
  }
}

これは、ブレークポイントに達すると、定義したカスタム ルールが有効になることを意味します.さまざまなサイズのデバイスが数多くありますが、一般的に使用されているのは breakpoints. です.

• 320px — 480px: モバイル デバイス
• 481px — 768px: iPad、タブレット
• 769px — 1024px: 小さい画面、ラップトップ
• 1025px — 1200px: デスクトップ、大画面
• 1201 ピクセル以上 — 特大画面、テレビ

条件にメディアの種類を含めることもできます (おそらく画面を使用するでしょう).four categories: があります.

• all — すべてのメディア タイプ
• print — プリンター用
• screen — コンピュータ画面、タブレット、スマートフォン用
• speech —ページを声に出して「読み上げる」スクリーン リーダー用

これらすべてをまとめると、最終的なタブレットのメディア クエリは次のようになります.

.opening-paragraph {
  font-size: 25px;
}

@media screen and (max-width: 768px) {
  .opening-paragraph {
    font-size: 20px;
  }
}

マージン、パディング、フォント サイズ、色などを調整できる特定の CSS ルールを作成できます.これらは非常に強力です.これが少し役立つことを願っています.これまで私は通常、Bootstrap のような応答性を適切に処理するライブラリまたはフレームワークを使用してきましたが、単純な古い CSS メディア クエリを使用している場合は、親友になるでしょう.読んでくれてありがとう!