Q&A
スマホで見た時に(max-width:400px)の中に書いたCSSが適用されないって認識でいいですかね？
テストに使ってる端末、もしくはデベロッパーツールで確認しているならどの機種のプレビューを見ているか教えてもらってもいいでしょうか？
前提・実現したいこと
現在、コーディングの勉強中なのですがレスポンシブで疑問が生まれたので教えていただきたいです
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
レスポンシブをしたときに、min-widthは反映されるのにmax-widthが反映されないです。。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="master.css"> 7 </head> 8 <body> 9 <section> 10 <h2>シニアフォン 3つのメリット</h2> 11 <dl class="flex-container"> 12 <div class="flex-item"> 13 <dt>使い方がかんたん</dt> 14 <dd>大画面でのタッチパネルで操作が楽々。 機能が絞られているので迷うこともありません。</dd> 15 </div> 16 <div class="flex-item"> 17 <dt>毎月定額で安心！</dt> 18 <dd>「通信量ってよくわからない。。。知らないうちに高くなったりしない？」などの心配も無用です。</dd> 19 </div> 20 <div class="flex-item"> 21 <dt>充実のサポート！</dt> 22 <dd>コールセンターだけでなく訪問サービスもございます。</dd> 23 </div> 24 </dl> 25 </section> 26 </body> 27</html>
CSS
1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7section { 8 width: 90%; 9 padding-top: 20px; 10 padding-bottom: 40px; 11 margin: 40px auto 0; 12 border: 1px dashed #ccc; 13 text-align: center; 14} 15 16h2 { 17 margin-bottom: 1em; 18} 19 20.flex-container { 21 display: flex; 22 justify-content: space-around; 23} 24 25.flex-item { 26 background: #09b; 27 color: #FFFFFF; 28 padding: 1em; 29 flex-basis: 30%; 30} 31 32.flex-item dt { 33 margin-bottom: 10px; 34 font-size: 1.2em; 35 font-weight: bold; 36} 37 38@media screen and (min-width:480px) { 39 h2 {font-size: 11em;} 40 .flex-container {flex-direction: column;} 41 .flex-item {margin: 0 1em 1em;} 42}
試したこと
コードの修正ツールで見ましたが反応なしです
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
試したブラウザはChromeです
ツールはDreamweaverです
返答ありがとうございます????♂️
デベロッパーツールで確認した時です。
どの機種も試しましたが反映されませんでした。
現状がグチャグチャだったのでまとめます
・(max-width:400px)or(min-width:400px)
max-widthに関しては何も反応なし
min-widthに関しては400px以下にした時何も変わらず（400px以上の時は反映されます）
うーん、codepenで(min-width:400px)を(max-width:400px)に変えて貼っつけてみたんですがメディアクエリは作動しているようですよ。
https://codepen.io/tatamisteak/pen/QWjYzQd
PCによって変わるとかはありますか？ちなみにmacbookpro使用しています
念のため動画で撮影しました
https://www.youtube.com/watch?v=TR57gMb7MRg&feature=youtu.be
回答1件
0
ベストアンサー
よくみたらviewportのタグないじゃん！！！
このmetaタグをhead内に入れてやれば、端末の画面幅に合わせてコンテンツの幅も伸縮してくれるようになります。
HTML
1<meta name="viewport" content="width=device-width,initial-scale=1">
viewportて何ぞや？って感じなら、ここがわかりやすいと思います。
viewportを理解して正しいレスポンシブデザインを設定しよう | tree
投稿2020/05/22 10:26
編集2020/05/22 10:27総合スコア354
あなたの回答
tips
プレビュー
