Ajouter une classe ou d'un autre attribut à l'aide de media query

Je suis actuellement en utilisant le CSS media queries pour cible quelques petites/moyennes des appareils à écran comme ceci:

@media screen and (min-device-width: 480px) {
  ...
}
@media screen and (min-device-width: 720px) {
  ...
}

Cela fonctionne comme prévu, et je peux appliquer des styles à certains sélecteurs, mais.. Ce que je me demandais si il existe un moyen d'ajouter une classe ou d'un autre attribut à un sélecteur de fonction sur la requête de média.

Exemple de ma pensée:

@media screen and (min-device-width: 480px) {
  body { addClass('body-iphone') }
}

Est-il un moyen de le faire avec du CSS ou de JavaScript peut-être?

stackoverflow.com/questions/4801224/... - cela sonne comme la résolution de votre problème
presque oui, mais il ne fonctionne pour tous les appareils (ordinateurs de bureau), j'aimerais trouver un moyen d'utiliser min-device-width pour s'assurer que ce n'est pas juste un petit 13" écran d'ordinateur portable
eh bien, vous devriez également vérifier l'agent de l'utilisateur. quirksmode.org/js/detect.html

OriginalL'auteur Alex K | 2013-02-22

  1. 9

    Découvrez Enquire.js. Léger, pur bibliothèque JavaScript pour la manipulation des media queries. Semble assez cool.

    c'est quelque chose de semblable à ce dont j'avais besoin! je suis tout simplement en votant pour cette raison qu'il peut faire quoi que ce soit dans les rappels, utilise les media queries, et a des issues pour les anciens navigateurs.. quoi d'autre avons-nous besoin!

    OriginalL'auteur user2168565

  2. 6

    Il ne peut être fait avec du CSS.

    Ont un look à MOINS ou SASS. Ils sont conçus pour rendre de travail avec CSS plus dynamique et flexible.

    Une fois que vous les utilisez. Vous ne pouvez pas vivre sans eux.

    Dans le cas où vous souhaitez ajouter un sélecteur de classe existant à l'organisme sur certaines résolutions.

    SASS

    .some-style { background-color:red; }

@media screen and (min-device-width: 480px) {
    body {
        @extend .some-style;
    }
}
    Et comment voulez-vous ajouter le "corps-iphone' classe à la balise body en utilisant LESS/SASS et sans javascript ? ..
    Voir ma réponse mis à jour.
    Bon ok, mais vous n'êtes pas à répondre à la question. Ce n'est pas ajouter une classe à la balise body, c'est tout simplement l'application de la css d'une classe à la balise body.
    Je n'ai jamais dis que vous pourriez ajouter une classe réelle pour le corps nœud avec les styles. Ma démarche est quasiment la même. La seule vraie différence, c'est que javascript serait ajouter une classe réelle du nœud classList et ce qui ne fonctionne pas. Elle s'applique uniquement le style qui dans la plupart des cas devrait suffire.
    cela ne fonctionne pas sur sass

    OriginalL'auteur Bart

  3. 1

    prendre un coup d'oeil à conditionizr cela pourrait être ce que vous cherchez http://conditionizr.com/

    OriginalL'auteur iConnor

  4. 0

    Pour cela peut aussi aider à Modernizr - peut détecter même si permis par svg ou d'autres fonctions est activée.

    http://modernizr.com/

    OriginalL'auteur Павел Иванов

  5. 0

    Une solution d'activer JavaScript

    if (window.matchMedia("(min-device-width: 480px)").matches {
    //modify dom
}

    OriginalL'auteur Synesso