＃目的
・レスポンシブWebデザインについて理解を深める
#内容
画面の大きさによって表示されるWebのスタイルは変更できる。
例えば、パソコンとスマホでは同じウェブサイトでもレイアウトが異なります。
画面の大きさによって見やすく表示内容を変更する機能をメディアクエリといいます。
メデイアクエリは表示内容が切り替わる地点をブレイクポイントと呼び、
ブレイクポイントの領域を定めてCSSの内容を記述します。
style.html
@media (max-width: 500px){
p{
font-size: 10px;
}
}
→画面幅が最大５００pxの時、フォントサイズが１０px
つまり、５００px以下はフォントサイズは１０pxとなる
ブレイクポイントごとにCSSを記述し、デバイスに応じた見やすいウェブデザインをすることができます。