レスポンシブが効いていない場合

Bonjour!

とりあえずこのサイトの制作はひとまず終了となりました。

レスポンシブ対応がなぜか効いてくれなくて、とても時間がかかりましたが、

最終的にはちゃんと切り替わってくれるようになりました。

結論から言うとレスポンシブが効かない場合の確認点は以下の通りでした。

①Viewportの記述方法
②Media Queriesの記述方法
③CSSの読み込み

Media Queriesを適用するには以下のコードを内に入れ込む必要があります。

最初調べると以下の書き方を見つけたのでこのまま書いていました。

しかしもうすこし調べてみるとほとんどの場合

としていることが分かりました。

screenはメディアのタイプの一つで、PCやスマホのような画面のあるデバイスを指しているようです。
このほかにall,print,speechの全部で4種類あるようですが、現時点で使い時は良く分かりません。
今回はscreeを使いました。

一番最後まで引っかかっていたのはこの部分でした。

<link href=”https://fonts.googleapis.com/css?family=Acme&display=swap” rel=”stylesheet” media=”screen”>

メディアタイプのscreenも同じく内で読み込まないといけないことを最初しりませんでした。
スマホで見てもデザインが崩れたものしか表示されず悩んでいたところ、上記にたどり着き思った通りの
切り替えをしてくれるようになりました。

これで今後レスポンシブもできそうです！

では！