响应式媒体未显示预期结果

我正在响应屏幕上工作。结果在某些时候没有显示。下面的例子将有助于理解我的应用程序的机制。请建议我应该使用什么确切的媒体查询来获得所有设备结果。响应式媒体未显示预期结果

我的代码是

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

不是我在找什么:( –

响应式媒体未显示预期结果

回答

相关问题