レスポンシブサイト「Media Queries」でCSSを振り分ける
Date 2016.02.29 Category blog
PC用のCSSから記述する場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* デフォルト：980px以上用（PC用）の記述 */ @media screen and (max-width: 979px) { /* 979px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media screen and (max-width: 479px) { /* 479px以下用（スマートフォン用）の記述 */ } |
スマートフォン用のCSSから記述する場合
|
1 2 3 4 5 6 7 8 9 10 |
/* デフォルト：479px以下用（スマートフォン用）の記述 */ @media screen and (min-width: 480px) { /* 480px以上用（タブレット／スマートフォン用）の記述 */ } @media screen and (min-width: 768px) { /* 768px以上用（タブレット用）の記述 */ } @media screen and (min-width: 980px) { /* 980px以上用（PC用）の記述 */ } |
それぞれの画面幅個別に指定する方法
|
1 2 3 4 5 6 7 8 9 10 11 |
@media screen and (min-width: 980px) { /* 980px以上用（PC用）の記述 */ @media screen and (min-width: 768px) and (max-width: 979px) { /* 768px - 979px用（タブレット用）の記述 */ } @media screen and (min-width: 480px) and (max-width: 767px) { /* 480px - 767px用（タブレット／スマートフォン用）の記述 */ } @media screen and (max-width: 479px) { /* 479px以下用（スマートフォン用）の記述 */ } |
CSSを個別で作成し読み込みで振り分ける場合
|
1 2 3 |
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">/* 画面サイズが480pxまでこのファイルのスタイルが適用される。*/ <link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */ <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">/* 画面サイズ1024px以上は |
最新のデバイスサイズ一覧を確認できるサイト
Device Metricsは各モバイルデバイスやタブレット、ウェアラブルデバイス（今は主に時計）などのそれぞれの画面に関する情報をまとめたWebサイトです。
