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