max-width:500pxでは【実現したい】縦4横2構成→【現実】縦8横1に
max-width:620pxでは【実現したい】縦2横4構成→【現実】縦3横3になってしまいます。
悩んで3日経ったのですが、どうしてもうまくいきません。
どなたか原因が分かる方、ご教授願えませんでしょうか?
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4 5 <head> 6 <meta charset="utf-8"> 7 8 <meta http-equiv="X-UA=Compatible" content="IE=edge,chrome=1"> 9 10 <title>2-1</title> 11 12 <meta name="viewport" content="width=device-width,initial-scale=1"> 13 14 <link rel="stylesheet" href="css/css"> 15 <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)"> 16 17 </head> 18 <body> 19<div class="nav"><div class="section-inner"> 20 <ul> 21 <li>About</li> 22 <li>About</li> 23 <li>About</li> 24 <li>About</li> 25 <li>About</li> 26 <li>About</li> 27 <li>About</li> 28 <li>About</li> 29 </ul> 30 </div></div> 31</body> 32</head>
CSS
1div.nav { 2 background-color: #DDDDDD; 3 overflow:hidden; 4} 5 6div.nav ul { 7 list-style: none; 8 margin:0; 9 padding:0; 10} 11 12div.nav ul li { 13 float:left; 14 padding:10px 15px; 15 border-right:1px solid #CCCCCC; 16 font-size:93%; 17 18}
responsive.css
1 2div.nav ul li { 3 width: 25%; 4 border-bottom: 1px solid #CCCCCC; 5} 6 7 8 9@media screen and (max-width: 620px) { 10 11 div.nav ul li { 12 width: 33%; 13 } 14} 15 16@media screen and (max-width: 500px) { 17 18 div.nav ul li { 19 width:50%; 20 font-size:83%; 21 } 22}
もし CSS で質問文以外に記述しているコードがあれば、質問文に追記していただきたいです。また、HTML で読み込んでいる2つの CSS ファイルのうち、どちらにどのコードが書かれているかについても、教えていただけませんか?
s8−chu様 目を通して頂いてありがとうございます。nav部分のレスポンシブ対応を練習しているので上記のみでございます。
返信ありがとうございます。HTML で読み込んでいる2つの CSS ファイルのうち、どちらにどのコードが書かれているかについても、教えていただけませんか?
s8−chu様 失礼いたしました。上から2つ目が上のCSS、3つ目が下のresponsive.cssでございます。
こちらの環境で試したとき、「`620px`のときに縦3横3になってしまう」という現象だけが再現できませんでした。「もう一度その現象が再現するか」、「現象が再現したブラウザは何か」、「そのブラウザのバージョンは何か」、を教えていただけませんか?
s8−chu様 ブラウザはGooglechromでバージョンは70.0.3538.775です。もう一度した所変化として①一列(縦1横8)②縦3横3③縦4横2④縦8横1に変化致しました。お時間頂き申し訳ありません。
実現したいのはpc(max-width900)、タブレット(max-width620)、スマホ(max-width500)①一列②縦4横2③縦2横4です。
現状を再現したくコードをコピペさせてもらったのですが、620px幅までの時に縦4横2になるのですが、提示忘れないですか?例えばbox-sizingとか。
あと、metaタグのcontent="width=device-width"の2つ目の”(ダブルクォーテーション)は不要です
akihiro3様 貴重なお時間を頂き感ありがとうございます。上記のみでございます。そうですよね…そのままスマホ幅までその状態が続けば良いのですが、最後が崩れてしまいます。申し訳ないです。
akihiro3さん> 横から失礼します。質問文によると、「`620px`以下のときには縦2横4(2行4列)にしたい」ようですから、質問文のコードでは条件を満たしていないのではないでしょうか?
akihiro3 様 metaタグの気づき、本当にありがとうございました。皆様のお力添えを頂き解決致しました。お時間頂き助けて頂いて本当に感謝しております。本当にありがとうございました。
s8_chuさん、さすがです。7つ目のコメントを何度も読み返してやっと気付けました
回答2件
あなたの回答
tips
プレビュー