4

私は、わずか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;
        }
}
4

2 に答える 2

2

間違った順序のメディア クワイアを使用しています @media screen と (min-width: 960px) css を最初に使用し、次に @media screen と (min-width: 320px) simple の css を追加します :)

于 2013-06-19T14:07:02.620 に答える
1

幅 360px の架空の DeviceX を使用して、メディア クエリを見てみましょう。

@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
}
于 2013-06-19T14:29:42.333 に答える