@media screen and (min-width: 320px) soient écrasées.

Je suis tring de travailler avec un petit partir de, à seulement 3 éléments.
C'est la que je suis à l'aide, quelqu'un peut s'il vous plaît laissez-moi savoir où je vais mal?
J'ai essayé de travailler à la fois avec min-width et max-width, rien ne semble fonctionner.

<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/[email protected]") 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/[email protected]") 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/[email protected]") no-repeat;
        background-size:170px 40px;
        }
    p span strong{
        display:block;
        }
}
  • Pourriez-vous mettre dans un jsfiddle avec le HTML afin que nous puissions voir ce que vous essayez de faire?
  • jsfiddle.net/Kt3EJ/1 Ici, j'ai besoin de la touche de flotter à gauche du champ lorsqu'il est 600px et de revenir à la façon dont il est quand son 320px.
InformationsquelleAutor Rohit Rao | 2013-06-19
  1. 1

    vous utilisez le mauvais ordre de médias cahiers utilisation de @media screen and (min-width: 960px) css en premier, puis ajouter la feuille css de @media screen and (min-width: 320px) simple 🙂

    • Eh bien, j'ai 3 requêtes, 320, 600 et 960, afin de vous dire que j'utilise 960 abord, puis 600 puis le 320 et ça marchera? S'il vous plaît corrigez-moi si je me trompe.
    • Exactement. Toujours utiliser cette commande pour écrire des médias cahiers
    • Je vais essayer cela. Merci Abdul. 🙂
    • ce que vous voulez faire avec ce formulaire, u peut l'expliquer, je peut vous aider à obtenir le résultat désiré
    • C'est en fait très simple, la sortie de vous voir, maintenant, c'est 960px et 320px, et quand il s'agit de 600px, j'ai juste besoin de bouton de tomber à côté du champ de texte. C'est pour les gens à s'abonner à un bulletin d'information à partir de tous les écrans.
    • utiliser max-largeur au lieu de min-width
    • Je l'ai fait, essayer quelques choses à partir de là.
    • Hey vous savez quoi, je crois que je viens de trouvé le bon code de match (la solution), mais je ne peux pas le voir sur la production maintenant. Vous permettra de savoir de demain. Ce hors de cet espace. Merci Abdul, vous remercie de votre aide! 🙂

    InformationsquelleAutor Abdul Malik
  2. 1

    Allons par le biais de vos requêtes de média avec imaginaire Périphériquex, qui est 360px de large.

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

    Fondamentalement, votre appareil est répondre à plusieurs requêtes. Plus tard, les media queries sont d'écraser les propriétés figurant dans les anciennes requêtes de média.

    Il se peut que ce que vous cherchez est d'avoir une requête de média à la fois avec un min-width et max-width:

    @media screen and (min-width: 600px) and (max-width: 960px) {
    //no match: 360px < 600px
}
    • Wow, maintenant que je viens juste de commencer, quelle est ma mission! Comment puis-je le résoudre.
    • Cela dépend de votre codage de préférence, vraiment. J'ai ajouté une requête de média montrant comment spécifier à la fois le min-width et max-width, mais je préfère me fier sur la cascade à l'aide d'un mobile style de l'écriture des requêtes de média.
    • Ok, je suppose que je viens de trouver une sorte de solution. laissez-moi voir. 🙂 merci à vous!
    InformationsquelleAutor cimmanon