web-dev-qa-db-fra.com

Puis-je utiliser @media d'une manière if / else?

J'ai ce formulaire placé dans le pied de page de ma page (a juste une zone de texte et un bouton). Je veux essayer d'appliquer @media à elle, en fonction de la largeur de la fenêtre d'affichage disponible ... Donc, par exemple, dans mon cas, la pleine largeur de ce formulaire en a besoin d'environ 270 px. Je veux donc appliquer CSS pour dire que:

if the width available is at least 270px
     apply first set of CSS rules
else
     apply second set of CSS rules

Comment puis-je faire cela en utilisant @media?

cssmedia-queries
30
Ahmad

Il n'y a pas de syntaxe if/else pour @media, Vous devrez donc répéter la même requête média dans deux règles @media Distinctes et utiliser not pour que l'une d'entre elles signifie "else" ".

Dans votre cas, la requête multimédia serait all and (min-width: 270px). (Vous devez avoir un type de support pour que not fonctionne; la valeur par défaut est all donc je ne fais que l'utiliser.)

Votre CSS ressemblerait alors à ceci:

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

@media not all and (min-width: 270px) {
    /* Apply second set of CSS rules */
}

Je dois ajouter qu'une façon populaire consiste à utiliser la cascade en ayant une seule règle @media Pour remplacer les styles:

/* Apply second set of CSS rules */

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

Cependant, cela ne suffit pas si vous avez des styles en dehors de la règle @media Qui ne sont pas (ou ne peuvent pas être) remplacés à l'intérieur. Ces styles continueraient de s'appliquer, et vous n'avez aucun moyen de les annuler avant de les redéclarer. Parfois, vous ne pouvez pas les annuler en les redéclarant, et c'est à ce moment que vous ne pouvez pas utiliser cette méthode pour appliquer des styles. Voir ma réponse à cette question pour une explication détaillée.

Dans cet exemple, la déclaration height: 200px S'applique toujours :

.example {
    width: 200px;
    height: 200px;
}

@media all and (min-width: 270px) {
    .example {
        width: 400px;
    }
}

Bien sûr, si ce n'est pas un problème, vous pouvez l'utiliser pour éviter la duplication des requêtes multimédias. Mais si vous recherchez une construction if/else stricte, vous devrez utiliser not et une requête multimédia dupliquée.

41
BoltClock

Oui. Commencez généralement avec votre CSS principal, puis modifiez la conception en fonction de la largeur (ou du type de support) avec du CSS supplémentaire qui remplacera tout CSS précédent.

<style type=text/css">

/* the main css for the site */
.main-content {width:960px;}


/* the css adjustment for the site between two widths */
@media screen and (max-width:600px) and (min-width:271px) {
    .main-content {width:100%;}
}

/* the css adjustment for the site with a max-width of 270px */
@media screen and (max-width:270px) {
    .main-content {width:260px;}
}
</style>
3
Shanosha

Voici comment mettre en œuvre ce scénario

<style>
 // apply second set of CSS rules
@media (min-width: 270px) {
 // apply first set of CSS rules
}
</style>

Dans cette situation, les règles CSS appliquées auparavant seraient écrasées lorsque l'argument de requête multimédia est rencontré.

0
Kevin Lynch