3分で読める！【レスポンシブ対応】レスポンシブデザインが動かない時の対応

本日はレスポンシブデザインが上手く反応しない場合の対応について

書きたいと思います！

確認すること①（viewportの記述がない）

htmlのheadタグの中にviewportの設定してない場合は、

レスポンシブデザインは反応しないです。

もし設定してない場合は、以下のコードを記述しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

 

確認すること②（viewportの記述場所）

viewportを設定するコードを書く場所を間違えている場合も

レスポンシブデザインが反応しないです。

正しくは、メディアクエリを記載するCSSファイルを指定している行より

下の行に記述しましょう。（linkタグより下）

 ＜例＞

<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">