方法-一般的なデバイスのブレークポイント
一般的なデバイスブレークポイントにメディアクエリを使用する方法を学びます。
典型的なデバイスブレークポイント
高さと幅が異なる画面やデバイスがたくさんあるため、デバイスごとに正確なブレークポイントを作成することは困難です。物事を単純にするために、5つの一般的なグループをターゲットにすることができます。
例
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
関連ページ
CSSチュートリアル:CSSメディアクエリ
CSSチュートリアル:CSSメディアクエリの例
CSSリファレンス:@mediaルール
RWDチュートリアル:メディアクエリを使用したレスポンシブWebデザイン
JavaScriptチュートリアル:window.matchMedia()メソッド