WEBサイト制作時の備忘録として。
レスポンシブWEBデザインでサイズ別に表示させたい場合の記述方法。
一つのCSSファイルで全て読み込む場合と、サイズにより読み込むCSSファイルを変更する場合の記述法
【一つのCSSで全て読み込む場合】※CSS内に直接記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media screen and (max-width:480px) { /* 画面サイズが480pxまで */ } @media screen and (min-width:481px) and ( max-width:768px) { /* 画面サイズが481pxから768pxまで */ } @media screen and (min-width:769px) { /* 画面サイズが769pxから */ } |
【画面サイズ事に異なるCSSファイルを読み込ませる場合】<head>内のlink要素として
|
1 2 3 |
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 769px)"> <link rel="stylesheet" href="tablet.css" type="text/css" media="screen and (min-width: 481px) and (max-width:768px)"> <link rel="stylesheet" href="sp.css" type="text/css" media="screen and (max-width: 480px)"> |
以上。
コメントを残す