Question

我正在制作一个响应式屏幕。结果未在某一点显示。以下示例将有助于了解我的应用程序的机制。请建议我应用什么确切的媒体查询来获取所有设备结果。

我的代码是

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>

请指教。提前致谢。请记住，它适用于ie，firefox，chrome和safari。

Answer 1

试试这个我希望它对你有所帮助。

    <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>

响应媒体未显示预期结果

1 个答案: