はじめに
今回はオリアプデも使用したレスポンシブ対応について簡単にまとめていく。
レスポンシブ対応とは？
画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計すること。
例：PCならPCのサイズ、スマホならスマホのサイズで画面幅を調整
レスポンシブの実装
実装を始めていく。
viewportを設定
headタグ内に以下のファイルを記述
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> #記述
<title>アプリ名</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
contentプロパティにwidth="device-width"を指定することで、ブラウザの大きさをPCやスマートフォンなどの機器の大きさに合わせることができる。
initial-scaleは、画面の拡大率を指している。
画面サイズごとにcssを適応
やり方は簡単
例
/* PC表示時 */
p {
font-size: 30px;
}
/* タブレット表示時 */
@media (max-width: 1000px) {
p {
font-size: 25px;
}
}
/* スマホ表示時 */
@media (max-width: 500px) {
p {
font-size: 20px;
}
}
それぞれの端末で文字の大きさが変わるように記述
メディアクエリ
「@media (max-width/min-width: 〇〇〇px) { }」という記述をメディアクエリという。
これは表示された画面幅に応じて適用するスタイルを切り替える機能。
ブレークポイント
メディアクエリによって規定されるスタイル適用の分岐点。
上記記述の場合だと、1000pxや500pxがこれに当たる。これを起点に表示が変わる
「max-width: 500px」の部分は「画面幅が最大500pxのとき」という意味。すなわち「画面幅が500px以下のとき」という意味になる。
また、上記でのブレークポイント数値は大雑把なため、検証ツールでサイズを確認すること!
終わりに
今日は超がつくほど簡単でしたが、私は今からエラーと戦ってきます。良い息抜きになりました。。