どのように作成するか：典型的なデバイスのブレイクポイント
- 前のページ 閉じられるリストアイテム
- 次のページ ドラッグ可能なHTML要素
一般的なデバイスブレイクポイントに対するメディアクエリの使用方法を学びます。
典型的なデバイスブレイクポイント
さまざまな高さと幅を持つ多くのスクリーンとデバイスが存在するため、各デバイスごとに正確なブレイクポイントを作成することは難しいです。
操作を簡素化するために、以下の5つの一般的なグループに焦点を当てることができます：
例
/* 超小画面デバイス（スマートフォン、600px以下） */
@media only screen and (max-width: 600px) {...}
/* 小画面デバイス（縦置きタブレットおよび大画面スマートフォン、600px以上） */
@media only screen and (min-width: 600px) {...}
/* 中画面デバイス（横置きタブレット、768px以上） */
@media only screen and (min-width: 768px) {...}
/* 大画面デバイス（ラップトップおよびデスクトップ、992px以上） */
@media only screen and (min-width: 992px) {...}
/* 超大画面デバイス（大画面ラップトップおよびデスクトップ、1200px以上） */
@media only screen and (min-width: 1200px) {...}
関連ページ
チュートリアル：CSSメディアクエリ
チュートリアル：CSSメディアクエリの例
リファレンスマニュアル：CSS @mediaルール
チュートリアル：メディアクエリを使用したレスポンシブWebデザインの実現
リファレンスマニュアル：JavaScript window.matchMedia()メソッド
- 前のページ 閉じられるリストアイテム
- 次のページ ドラッグ可能なHTML要素
