PC、スマホ、タブレット。各デバイスに合ったスタイルシートをCSSファイル1つで指定させたい時のメモ。

インターネットで気になるアレコレをGoogle+で!

media-queries-css

PCからスマートフォン、タブレット端末まで各デバイスに合ったスタイルシートをCSSファイル一枚で対応させたい時は Media Queries を使いましょう。こんな感じで指定してあげてください。それではどうぞ〜。

/* style */ にスタイルシートを記入してね。

スマートフォン

縦横

@media (max-width: 767px) {
	/* style */
}

縦向きのみ

@media (max-width: 320px) and (orientation: portrait) {
	/* style */
}

横向きのみ

@media (min-width: 321px) and (orientation: landscape) {
	/* style */
}

タブレット

縦横

@media (min-width: 768px) and (max-width: 1199px) {
	/* style */
}

縦向きのみ

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
	/* style */
}

横向きのみ

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
	/* style */
}

PC

@media (min-width: 1200px) {
	/* style */
}

スマホ以外全て対応

@media (min-width: 768px) {
	/* style */
}

IEでもMedia Queries使いたい!

実はIEではMedia Queries使えないんです。でも、javascriptが全て解決してくれます。

css3-mediaqueries-js

コレをこんな感じでhead内に書いておけば、IEでもMedia Queries使えるようになるので、是非試してみてください〜。

<!--[if lt IE 9]--> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<!--[endif]-->

おまけ

よく見かける @media only screen and (min-width: ~px) の「only screen and」は無くても機能します。少しでも文字数を削りたい!って方は是非削ってあげてください。

参考にしました

iPhone/iPad/iPad mini用メディアクエリ一覧

css3-mediaqueries-js