WEBサイト作成中にPCやスマホやタブレットで別のCSSを当てる時の
メディアクエリのメモとしてこちらでご紹介します。
1. スタイルシート（CSSファイル）に記述する
link要素として記述するのではなく、CSSファイルに直接
画面ごとの別のcssを記述します。
sample.css
@mediascreenand(min-width:480px){/* 画面サイズが480pxまで */p{color:red;}}@mediascreenand(min-width:760px)and(max-width:960px){/* 画面サイズが760pxから960pxまで */p{color:red;}}@mediascreenand(min-width:960px){/* 画面サイズが960px以上*/p{color:red;}}・ブラウザ上では上から順に読み込まれる。
・このように小さい画面から順番に指定していく事を
「モバイルファースト」という。
以上で終了です
ご覧いただきありがとうございました。