twitterのユーザページを参考にレスポンシブWEBデザインを勉強しているのですが、
ブラウザの拡大/縮小でmax-widthを可変させるmedia screenでの挙動について質問です。
html
1<div class="App-container"> 2 <div class="local-nav"> 3 <div class="left-content nav"> 4 <ul class="main-menu"> 5 <li>メニュー1</li> 6 <li>メニュー2</li> 7 <li>メニュー3</li> 8 </ul> 9 </div> 10 <div class="right-content nav"> 11 <button id="btn">ボタン</button> 12 </div> 13 </div> 14</div>
css
1@media screen and (min-width: 1236px){ 2 .App-container { max-width: 1190px; } 3} 4.App-container { 5 margin: 0 auto; 6 max-width: 890px; 7} 8.nav li { float: left; } 9.left-content { float: left; } 10 11.right-content { 12 float: right; 13 text-align: left; 14} 15.local-nav { 16 height:46px; 17 background-color: #f9f9f9; 18}
上記はmedia screenでブラウザサイズが1236px以上の場合はmax-width:1190pxを適用するコードですが、
ブラウザウィンドウサイズ1270pxで上記のコードを表示するとなぜかmax-width:890pxになってしまいます。
max-widthやmedia screenの理解が甘いせいか、
シンプルなコードでも思ったように動かず、解決できないのでアドバイス頂けないでしょうか。よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。