23 November 2015
レスポンシブデザインのためのメディアクエリ
<style>
/* 1200px以上のブラウザ用 */
今まで指定していたスタイル
@media (max-width: 1199px) {
/* 1199pxまでのブラウザ用 */
ここにスタイル
}
@media (max-width: 991px) {
/* 991pxまでのブラウザ用 */
ここにスタイル
}
@media (max-width: 767px) {
/* 767pxまでのブラウザ用 */
ここにスタイル
}
@media (max-width: 479px) {
/* 479pxまでのブラウザ用 */
ここにスタイル
}
</style>
「1200px以上のブラウザ用」として指定したスタイルがデフォルトになります。
「1200px以上のブラウザ用」で指定したデザインで、スマホで確認した時や、ブラウザ幅をスライドさせて小さくした時に、崩れてしまう要素・横スクロールが出てしまうなど不都合があれば、各ブレイクポイントで個別に指定します。
max-width: 数値pxで指定した数値がブレイクポイントです。max-widthは、ブラウザの横幅サイズが数値以下であるブラウザに対する指定になります。使用しないブレイクポイントは削除して問題ありませんし、ブレイクポイントの数値も変更できます。
1200(1199)/992(991)/768(767)/480(479) はよく使われるオーソドックスなブレイクポイントです。
今まで指定してきたスタイルが携帯向けの場合は、
<style>
/* 767px以下のブラウザ用 */
今まで指定していたスタイル
@media (min-width: 768px) {
/* 768pxからのブラウザ用 */
ここにスタイル
}
@media (min-width: 992px) {
/* 992pxからのブラウザ用 */
ここにスタイル
}
@media (min-width: 1200px) {
/* 1200pxからのブラウザ用 */
ここにスタイル
}
</style>max-widthをmin-widthにするとブラウザの横幅サイズが数値以上であるブラウザに対する指定になりますので、これからメディアクエリを導入する場合には使いやすいです。この場合、モバイルファーストといって、上記の「767px以下のブラウザ用」がデフォルトになります。
スタイルシートは上から順に読み込まれますので、
max-widthは数値が大きいブレイクポイントから先に書く必要があります。mix-widthは数値が小さいブレイクポイントから先に書く必要があります。viewportの指定を忘れずに
メディアクエリの指定をしたら、<head></head>にビューポートタグを忘れずに記述。
<meta name="viewport" content="width=device-width, initial-scale=1">
