レスポンシブが効かない時の対応
そろそろレスポンシブ対応もしないと！
と思った時に全然効かなかったお話。
効かない要因その①
headタグの中に"viewport"を書き忘れている。
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
ちゃんといますね。。。
効かない要因その②
記載の仕方が間違っている、もしくは詳細度が弱い
一般的な記法
@media screen and(min/max-width: 〇〇px){ 適用したいスタイル }
style.scss
@media screen and(max-width: 1200px){
header{
display: none;
}
}
上記のコードなら1200px以下になるとヘッダーが消えますよ。という意味。
ちなみに私のheaderは存在し続けていましたが。。
詳細度が弱い可能性がある時は、header等ネストしていないタグを指定して確認すると
分かりやすい。
ちなみに詳細度が弱い場合は同じようにネストして書くか、元のスタイルにメディアクエリ自体を個別に設定してしまうという方法もあるらしい。
例：
style.scss
.lesson-wrapper {
//略
h2 {
//略
}
.lessons {
.lesson {
float: left;
width: 25%;
//レスポンシブ対応の為、新しく追加したメディアクエリ
@media only screen and (max-width:1000px) {
width: 50%;
margin-bottom: 50px;
}
}
}
}
効かない要因その③
Wacth Sassが動いていない。←これ
超初歩的なミスでしたｳｩｯ･･･(´;ω;`)
コードはいつもVS CODEを使って書いていて、sassを適用させる為に
WatchSassを入れていたんだけど、ワークスペースを再起動した時に、
起動させるの忘れてた。。。
こんな事に1時間近く費やして悲しかったので、
記事にしてみました。