webページ制作時見る端末によって横幅が変わってしまうため
レスポンシブ対策をとる必要がある
実際に確認するにはgoogle chromeの検証ツールで
画面横幅を大きくしたり小さくしたりすることにより確認可能だ！
の３種類を想定してCSSを設定した
まず最初に設定する事は
htmlのheadの中に以下赤字を追記
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
あとは
cssに以下を画面サイズごとに記述するだけだ
@media screen and (max-width:639px) {
/*スマホ用*/
}
@media only screen and (min-width:640px) and (max-width:1023px) {
/*タブレット用*/
}
@media screen and (min-width:1024px) {
/*pc用*/
}
※共通項目は上記３つの場合分けのかっこの外に書けば適用される
今回は場合分けごとにクラスを省略する記述
display:none; を記述した
細かくやろうと思えば、フォントサイズの変更、色の変更など
様々なことが適応できる
以下のgifファイルが今回試しにやってみた内容
https://gyazo.com/dc52950b51a2a5a069b2ab7b73b59605
その他のレスポンシブ対策として
・フォントサイズを％で表記
・overflow: hidden;
・overflow: scroll;
なども有効かと思われる
レスポンシブ対策はjsで行うものかと思っていたが、今回説明した条件分岐により
複数パターンのCSSがユーザーの利用環境（画面サイズ）により適用されることを学んだ
参考にしたサイト
https://creive.me/archives/16922/
