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

calendar

reload

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

Media Query とは

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

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

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

スマートフォンの場合

PCの場合

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