どうも挙動がいまいちなので、確認
記述の方法を再確認
例
<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以上はこのファイルはスタイルが適用される
media=の指定のあとに、
“screen
and (min-width:480px) minで○○px~から
and (max-width:1024px)” maxで○○px~まで
モバイルファーストと通常PCの記述順
モバイルファースト
@See https://allabout.co.jp/gm/gc/451911/2/
/* --------------------------------------------- */ /* ▼モバイルファースト (全環境に共通のデザイン) */ /* --------------------------------------------- */ /* -------------------------------------------- */ /* ▼タブレット用デザインとして付け足すデザイン */ /* -------------------------------------------- */ @media all and (min-width: 768px) { } /* ------------------------------------ */ /* ▼PC用デザインとして付け足すデザイン */ /* ------------------------------------ */ @media all and (min-width: 920px) { }
いくつで分けるのか?
モバイル | ~599px | |
タブレットと狭いデスクトップ | 600px~959px | min-width:600px max-width959px |
デスクトップと横タブレット | 960px~1280px | min-width:960px max-width1280px |
デスクトップ専門 | 1281px~ | min–width:1281px |
599pxまではモバイル専用
600px~959pxまではタブレット(とブラウザを狭くしたデスクトップ)
960px~1280pxまではデスクトップ(と横置きしたタブレット)
1281px~以上はデスクトップ専用)
@see http://scene-live.com/page.php?page=97
別のスタイルシートに分けたいが、リアルタイムに反応するのか?
一つのCSSに@media all and (min-width: 600px) and (max-width:959px) {とかなら分かるが、
外部CSSでもリアルタイムにいけるかテスト
<link href="base.css" rel="stylesheet" type="text/css" media="all" > <link href="style_600_959.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:959px)"> <link href="style_960_1280.css" rel="stylesheet" type="text/css" media="screen and (min-width:960px) and (max-width:1280px)"> <link href="style_1281.css" rel="stylesheet" type="text/css" media="screen and (min-width:1281px)">
おお?Baseの内容を見てくれない。 痛恨のアップロードミス
リアルタイムに反応でしてるな。
ならば、