Question

我想要使用一个小的，只有3个元素。这是我正在使用的，有人可以让我知道我哪里错了吗？我尝试过使用min-width和max-width，似乎没什么用。

<style type="text/css">


html,body{margin:0px; padding:0px; font-family:arial;}

form.form { margin:0px;}

p span strong{ color:#505050;}

form.form span.error {clear: left;display: block;font-weight: normal;margin-top: 2px;padding-left: 166px;}

/*form.form span.error {clear: left;display: block;font-weight: normal;margin-top: 2px;padding-left: 172px;}*/

form.form p.required, form.form span.required, form.form label.required
{font-weight: normal;}

form.form p {clear: left;margin: 0px;padding: 0px;width:544px;}


.btn_subscribe {
float: left;
margin: 0 0 11px 0;
width: 174px;
height: 41px;
background: url("http://www.vuesoftware.com/assets/btn_subscribenow.png") no-repeat;
background-size:170px 40px;
border: none;
cursor: pointer;
}

form.form div.submit{padding-top:7px;}
.text{ border: none; background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left; width: 184px; height:32px; font-size:12px;
    padding-left:11px;}

form.form div.no-label{font-size:11px; margin-left:0px !important;color: rgb(226, 140, 36); }

form.form div label {display: block; float: left; margin: 0; padding: 0 13px 0 0; text-align: right; width: 160px; font-size:13px;}

.required{ padding:10px 0px 0px !important;  }
div span span {display: block; padding-left:174px; }
div span span label{ float:none !important;}

@media screen and (max-width: 320px)
{
    form.form div.no-label{
        float:none;
        width:200px;
        }
    .text{
        border:none;
        background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left;
        width:184px;
        height:32px;
        }
    .btn_subscribe{
        background:url("http://www.vuesoftware.com/assets/btn_subscribenow@2x.png") no-repeat;
        background-size:170px 40px;
        }
      p span strong{
          display:none;
        }
}

@media screen and (min-width: 320px)
{
    form.form div.no-label{
        float:left;
        width:350px;
        }
    .text{
        border:none;
        background:url("http://www.vuesoftware.com/assets/input_subscribe_big.png") no-repeat top left;
        width:300px;
        height:32px;
        font-size:12px;
        padding-left:11px;
        }
    .btn_subscribe {
        width:250px;
        height:40px;
        background: url("http://www.vuesoftware.com/assets/btn_subscribefornewsletter@2x.png") no-repeat;
        background-size:250px 40px;
        border:none;
        cursor:pointer;
        }
}

@media screen and (min-width: 960px)
{
    form.form div.no-label{
        float:none;
        width:200px;
        }
    .text{
        border:none;
        background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left;
        width:184px;
        height:32px;
        }
    .btn_subscribe{
        background:url("http://www.vuesoftware.com/assets/btn_subscribenow@2x.png") no-repeat;
        background-size:170px 40px;
        }
    p span strong{
        display:block;
        }
}

Answer 1

让我们通过虚拟的DeviceX（360px宽）来查看媒体查询。

@media screen and (max-width: 320px) {
    // no match:  360px > 320px
}

@media screen and (min-width: 320px) {
    // match:  360px >= 320px
}

@media screen and (min-width: 960px) {
    // no match: 360px < 960px
}

/* media query found in your fiddle that's not listed in the OP */
@media only screen and (max-width:960px){
    // match:  360px <= 960px
}

基本上，您的设备正在匹配多个媒体查询。后来的媒体查询会覆盖早期媒体查询中的属性。

您可能正在寻找的是具有最小宽度和最大宽度的媒体查询：

@media screen and (min-width: 600px) and (max-width: 960px) {
    // no match: 360px < 600px
}

Answer 2

你使用错误的媒体quire顺序使用@media屏幕和（min-width：960px）css然后添加@media屏幕的css和（min-width：320px）简单：）

@media屏幕和（最小宽度：320px）被覆盖

2 个答案: