CSS: définir des requêtes de média dans une classe

Est-il possible d'écrire quelque chose comme

.global-container
  margin-top: 60px
  background-image: $image-bg
  @media(max-width: 767px)
    margin-top: 0
    background-image: none

Nous pouvons donc définir le desktop et mobile css à l'intérieur d'une classe

J'ai essayé cela, mais il ne semble pas travailler

Mise à JOUR:
C'est en fait de travail:
http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Veuillez jeter ; dans votre code... :-/

OriginalL'auteur cqcn1991 | 2014-01-24

  1. 15

    Vous devez faire comme ceci:

    @media all and (max-width: 767px) {
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

    Si vous voulez cible de bureau, vous pouvez utiliser:

    @media (min-width:1025px) { 
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

    Je viens de remarquer que vous êtes en utilisant SASS, vous pouvez le faire comme ceci:

    .global-container {
    margin-top: 60px;
    background-image: $image-bg;
    @media (max-width: 767px) {
        /* Your mobile styles here */
    }
    @media (min-width:1025px) {
        /* Your desktop styles here */
    } 
}
    Alors, où puis-je définir le desktop comportement?
    Donc, j'ai du type .global-container deux fois plutôt que de nidification son comportement différent en un seul endroit?
    vérifier ma mise à jour
    Bravo @felix

    OriginalL'auteur Felix

  2. 5

    Dans la plaine du CSS, la réponse est non. Vous ne pouvez pas. Les requêtes de média doit toujours être une coquille externe, recouvrant l'intérieur pour être appliquée en vertu de cette condition.

    Dans SASS et MOINS, cependant, il est pleinement valide. Toutes les convertisseurs de support imbriqués les accolades doivent être en mesure de déplacer la requête de média à l'extérieur, permettant ainsi de CSS pour fonctionner comme dit ci-dessus. (Vous pouvez vérifier la sortie de CSS après la compilation de sass/less fichier et de les voir faire.)

    Donc, si vous avez quelque chose comme ceci:

    body {
    background:green;
    @media (min-width:1000px) {background:red;}
}

    L'écran est vert dans le CSS (car il ignore que bizarre @media chose à l'intérieur du corps de style de bloc de définition) et en rouge dans le SASS/LESS (car il est ce que tu aimerais voir).

    Pour être exact, les préprocesseurs de comprendre l'extrait ci-dessus:

    body {
  background: green;
}
@media (min-width: 1000px) {
  body {
    background: red;
  }
}

    OriginalL'auteur dkellner

  3. 1

    Vous avez certainement d'appliquer une certaine forme de plusieurs requêtes. Le Code n'est pas de la magie, et CSS nécessite des paramètres pour ces sortes de requêtes.

    Vous pouvez utiliser le JS, mais qui n'est pas recommandé en fonction de votre cas d'utilisation.

    Ici est un CSS solution

    @media all and (minmax-width: 0px) and (min-width: 320px), (max-width: 320px) 
    { Insert Code };
}'

    OriginalL'auteur Nicholas Hazel

  4. 0

    Cela fonctionne:

    .column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

    http://css-tricks.com/media-queries-sass-3-2-and-codekit/

    OriginalL'auteur cqcn1991