響應式媒體未顯示預期結果

我正在響應屏幕上工作。結果在某些時候沒有顯示。下面的例子將有助於理解我的應用程序的機制。請建議我應該使用什麼確切的媒體查詢來獲得所有設備結果。響應式媒體未顯示預期結果

我的代碼是

html, body{margin:0; padding:0; height:100%;} 

.container{height:100%; width:64em; margin:0 auto} 
.container header{height:12%; background:#D9DCA2; display: block; width:100%} 
.container .wrapper{background:#EFF9B7; width:100%; height:88%;} 
.container .wrapper nav{height:100%; background:#a1DFB9; position:relative; float:left; width:8%} 
.container .wrapper article{height:100%; background:#FBF6CA; position:relative; float:left; width:92%} 


@media only screen and (min-device-width : 1201px) { 
    body{background:yellow} 
    .container{width:100%; height:100%;} 
    .container header{height:12%; background:#D9DCA2; display: block; width:100%} 
    .container .wrapper{background:#EFF9B7; width:100%; height:88%;} 
    .container .wrapper nav{height:100%; background:#a1DFB9; position: relative; float: left; width:8%} 
    .container .wrapper article{height:100%; background:#FBF6CA; position: relative; float:left; width:92%} 
} 

@media only screen and (max-device-width : 1200px) { 
    body{background:purple} 
    .container{width:100%; height:100%;} 
    .container header{height:8%; background:#D9DCA2; display: block; width:100%} 
    .container .wrapper{background:#EFF9B7; width:100%; height:92%;} 
    .container .wrapper nav{height:100%; background:#a1DFB9; position: relative; float: left; width:8%} 
    .container .wrapper article{height:100%; background:#FBF6CA; position: relative; float:left; width:92%} 
} 

@media only screen and (max-device-width : 800px) { 
    body{background:orange} 
    .container{width:100%; height:100%;} 
    .container header{height:10%; background:#D9DCA2; display: block; width:100%} 
    .container .wrapper{background:#EFF9B7; width:100%; height:90%;} 
    .container .wrapper nav{height:100%; background:#a1DFB9; position:relative; float: left; width:8%} 
    .container .wrapper article{height:100%; background:#FBF6CA; position: relative; float:left; width:92%} 
} 


@media only screen and (max-device-width : 640px) { 
    body{background:pink} 
    .container{width:100%; height:100%;} 
    .container header{height:14%; background:#D9DCA2; display: block; width:100%} 
    .container .wrapper{background:#EFF9B7; width:100%; height:86%;} 
    .container .wrapper nav{height:100%; background:#a1DFB9; position:relative; float: left; width:8%} 
    .container .wrapper article{height:100%; background:#FBF6CA; position: relative; float:left; width:92%} 
} 

@media only screen and (max-device-width : 480px) { 
    body{background:green} 
    .container{ width:100%; height:100%} 
    .container header{height:14%; background:#D9DCA2; display: block; width:100%} 
    .container .wrapper{background:#EFF9B7; width:100%; height:86%;} 
    .container .wrapper nav{height:100%; background:#a1DFB9; position: relative; float: left; width:8%} 
    .container .wrapper article{height:100%; background:#FBF6CA; position:relative; float:left; width:92%} 
} 

@media only screen and (max-device-width : 320px) { 
    body{background:blue} 
    .container{ width:100%; height:100%} 
    .container header{height:14%; background:#D9DCA2; display: block; width:100%} 
    .container .wrapper{background:#EFF9B7; width:100%; height:86%;} 
    .container .wrapper nav{height:12%; background:#a1DFB9; position: relative; float: none; width:100%} 
    .container .wrapper article{height:88%; background:#FBF6CA; position:relative; float:none; width:100%} 
} 

</style> 
</head> 

<body> 
<div class="container" id="container"> 
    <header>header</header> 
    <div class="wrapper"> 
     <nav>navigation</nav> 
     <article>article</article> 
    </div> 
</div>

請指點。提前致謝。請記住，它的即Firefox，鉻和Safari瀏覽器。

來源

2016-01-21 John Paul

你試過最小寬度和最大寬度，而不是最小設備寬度和最大設備寬度？只是一個想法。 – Blackbam

那麼我需要使用多少次從屏幕跳轉到屏幕？ –

如果您不知道某些事情爲什麼會有某些結果，請簡化問題。而不是使用五十個規則和七次迭代進行測試，只需使用單個規則在特定條件下更改頁面的背景顏色即可。然後聽@Blackham並使用'min'和'max-width'進行測試。你會學到更多。 – somethinghere

試試這個，我希望它對你有幫助。

<style> 
    .container { 
     float: left; 
     width: 100%; 
    } 
    header { 
     background: #ddd none repeat scroll 0 0; 
     float: left; 
     padding: 10px; 
     text-align: center; 
     width: 100%; 
    } 
    .wrapper { 
     float: left; 
     width: 100%; 
    } 
    nav { 
     background: #D9DCA2 none repeat scroll 0 0; 
     float: left; 
     min-height: 150px; 
     padding: 2%; 
     text-align: center; 
     width: 46%; 
    } 
    article { 
     background: #EFF9B7 none repeat scroll 0 0; 
     float: right; 
     min-height: 150px; 
     padding: 2%; 
     text-align: center; 
     width: 46%; 
    } 
    footer { 
     background: #ddd none repeat scroll 0 0; 
     float: left; 
     padding: 10px; 
     text-align: center; 
     width: 100%; 
    } 
    @media only screen and (max-width: 480px) 
    { 
    nav { 

     padding: 2%; 
     width: 100%; 
    } 
    article { 

     padding: 2%; 
     width: 100%; 
    } 
    } 
    </style> 

    <div class="container" id="container"> 
     <header>Header</header> 
     <div class="wrapper"> 
      <nav>Navigation</nav> 
      <article>Article</article> 
     </div> 
     <footer>Footer</footer> 
    </div>

來源

2016-01-21 13:55:05

不是我在找什麼:( –

響應式媒體未顯示預期結果

回答

相關問題