Q&A
回答ありがとうございます。
試してみましたが駄目でした、、、。
前提・実現したいこと
メディアクエリを適用したいのですが、うまくいきません。
viweportも設定していて、html内でも読み込みをしているのですが、繁栄されていないように思うので質問させていただきます。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" /> 6 <title>header</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 8 <link rel="stylesheet" href="sass/style.min.css"> 9 <link rel="stylesheet" href="sass/mediaquery.min.css"> 10</head> 11<body> 12 <header> 13 <div class="header-menu header-menu-container sticky-top"> 14 <div class="header-right"> 15 <ul class="list-container"> 16 <li><a href="">Card</a></li> 17 <li><a href="">News</a></li> 18 <li><a href="">Price</a></li> 19 <li><a href="">Access</a></li> 20 <li><a href="">Contact</a></li> 21 </ul> 22 </div> 23 <div class="header-left"> 24 <img src="img/logo.png" alt="logo"> 25 </div> 26 </div> 27 <div class="header-content"> 28 <h1>一番伝えたいことを書く</h1> 29 <p>リードリードリード</p> 30 <a href="#" class="btn">お問い合わせ</a> 31 </div> 32 </header> 33 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 34 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 35 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 36</body> 37</html> 38
scss
1//mediaquery.scss// 2@media screen and (max-width: 960px) { 3 .header-menu{ 4 background-color: white; 5 6 .header-right{ 7 margin-right: 100px; 8 } 9 } 10} 11
試したこと
Sassのコンパイルには、AtomパッケージのAutocompileを使っております。
viewportの確認と、htmlのリンクの記述ミスはないと思います。
回答2件
0
試しにほかのセレクタで確認してみてはいかがでしょうか。
CSS
1body { 2 background-color: yellow; /* これのみ反映されたら、HTML側でviewportを指定していないとかそういう可能性がある */ 3} 4@media screen and (max-width: 960px) { 5 body { 6 background-color: blue; /* これが反映されたらメディアクエリ自体には問題が無い（HTML上の記載とセレクタに問題がある可能性） */ 7 } 8} 9body { /* これをまず確認 */ 10 background-color: red; /* これが反映されたら少なくともCSSは読み込まれている。これが反映されなかったら、これより上に構文エラーがある（反映されたらこの指定は削除） */ 11}
【meta要素でビューポートを指定する－ウェブ制作チュートリアル】
http://www.htmq.com/tutorial/23_2.shtml
投稿2019/10/12 09:15
総合スコア69596
0
ベストアンサー
こちらで試してみてください。
@media screen and (max-width: 960px) {
.header-menu{
background-color: white;
}
.header-right{
margin-right: 100px;
}
}
投稿2019/10/12 06:55
総合スコア168
そうですか..残念です。
メディアクエリで設定しているモバイルサイズではない、通常のcssはちゃんと反映されていますか？
反映されていれば、どのデバイスで今確認しているかわかりませんが、確認しているデバイスが果たしてメディアクエリで設定しているサイズで合っているか確認してみてはいかがでしょうか。
→@media screen and (max-width: 960px)
通常のCSSは反映されております。
PCでchromのデベロッパーツールを用いて確認していますが、960の分岐点で変化が確認されません。。。
そうですか> < それでは、下記のcssで、header-menuのbackground-colorが黄色から青に変わるか試して頂きたいのですが、通常のウェブブラウザに表示し、画面を縦に横に伸ばしたり短くしたりした際に、背景色は切り替わりますか？
.header-menu{
background-color: yellow;
}
.header-right{
margin-right: 100px;
}
@media screen and (max-width: 960px) {
.header-menu{
background-color: blue;
}
.header-right{
margin-right: 100px;
}
}
ありがとうございます。
なんとか解決できました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/12 09:55
2019/10/12 10:02
2019/10/12 10:11
2019/10/12 12:18