CSSでレスポンシブデザインをする方法を解説します。
メディアクエリ
CSSの機能でメディアクエリというものがあり、それを使うとレスポンシブなデザインを作成することができます。
メディアクエリとは、画面サイズ別にデザインを切り替えることができる機能です。
サンプルを見てみましょう。
@charset "UTF-8";
font-size: 30px;
@media screen and (max-width:999px) {font-size: 20px;}
@media screen and (max-width:767px) {font-size: 15px;}
上記の例ではデフォルトは30pxで768~999pxの画面サイズは20px、
767px以下は15pxになります。
ただし、上記を扱うに当たって
htmlに以下metaタグを挿入する必要があります。
meta name="viewport" content="width=device-width,initial-scale=1">
以上です！
