メディアクエリまとめ Media Queries

スマートフォンが普及するにつれて、Web制作者としては避けては通れない道になりそうな Media Query 。毎年なんかしらの新しいものが出てきては覚えて、そして何かを捨ててを繰り返す。でも捨てたはずのものが急に役に立ったりするので(Tableレイアウトとか)、『今回も覚えておいて損は無い!』と自分を奮い立たせ勉強します。

Media Query とは

ザックリいうと『メディアのタイプ(PC、スマホ、印刷)によって、CSSを切り替える』事ができるCSSの仕様です。
【参考資料】http://mediaqueri.es/about/

つまり、どうしたらいいの?

詳細はこちらの方が大変詳しく説明しており、自分なんぞが説明するまでもありません。
なので、自分なりの結論のみを書きたいと思います。

スマートフォンの場合

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) , only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
スタイルの内容
}

PCの場合

@media screen and (min-device-width: 600px) and (max-device-width: 1920px) {
スタイルの内容
}

読み込み時に振り分ける方法もあるけど、CSSファイル内に書いた方が良い、、、と思う。

タイトルとURLをコピーしました