Pourquoi mes requêtes multimédias CSS3 ne fonctionnent-elles pas?

183

Dans le style.css, j'utilise des requêtes multimédias, qui utilisent toutes deux une variante de:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Les sites se redimensionnent à la mise en page que je souhaite dans un navigateur ordinaire (Safari, Firefox) lorsque je rétrécis la fenêtre, cependant, la mise en page mobile ne s'affiche pas du tout sur un téléphone. Au lieu de cela, je vois juste le CSS par défaut.

Est-ce que quelqu'un peut-il me montrer la bonne direction?

rouge conservatoire
la source
3
De quel téléphone portable s'agit-il? Media Queries est une nouvelle fonctionnalité de CSS, tous les navigateurs de téléphones mobiles ne la prennent pas en charge ...
Sparky
1
iPhone 4 et moi testons également sur un téléphone Android (2.2 Froyo) avec une résolution de 320 x 480.
redconservatory
En fait, je suis passé à la requête multimédia suivante sur iPhone 4 et cela fonctionne (mais je dois changer mon CSS pour s'adapter à la résolution plus élevée) @media uniquement écran et (-webkit-min-device-pixel-ratio: 2) {}
redconservatory
Je me suis finalement rendu compte que je manque pxdans @media (max-width: 320px).
Ryan
dans mon cas, c'était parce que la console du développeur Chrome était ouverte, donc la hauteur n'était pas ce à quoi je pensais
Rabolf

Réponses:

476

Ces trois conseils étaient utiles, mais il semble que je devais ajouter une balise Meta:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Maintenant, cela semble fonctionner à la fois sous Android (2.2) et sur iPhone ...

rouge conservatoire
la source
60
En fait <meta name = "viewport" content = "width = device-width, initial-scale = 1">
Lukas Lukac
4
8 ans plus tard et c'est toujours utile. J'ai également ignoré la balise Meta et je n'ai pas pu faire fonctionner les requêtes multimédias dans un projet. Balise Viewport et wham, ça marche
SoWhat
1
9 ans plus tard, toujours aussi utile. Je ne peux pas croire que j'oubliais
Breno Baiardi
@LukasLukac, pourquoi ça?
Jonesopolis
68

N'oubliez pas d'avoir les déclarations css standard au - dessus de la requête multimédia, sinon la requête ne fonctionnera pas non plus.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}
The4thIceman
la source
6
En fait, empilez vos styles CSS par ordre décroissant de la taille standard à la plus petite. Les règles s'appliquent toujours si vous avez toutes vos requêtes multimédias dans le même fichier.
Phil Andrews
1
Fonctionne pour moi même si je n'ai pas de déclaration css standard pour ladite classe.
Mason
Cela a résolu mon problème. Merci beaucoup ... J'ai négligé la possibilité que mon CSS soit écrasé.
pmcg521
21

Je soupçonne que le mot clé onlypeut être le problème ici. Je n'ai aucun problème avec les requêtes multimédias comme celle-ci:

@media screen and (max-width: 480px) { }

Moin Zaman
la source
20

J'ai utilisé bootstrap dans un site de presse mais cela ne fonctionnait pas sur IE8, j'ai utilisé le javascript css3-mediaqueries.js mais ne fonctionne toujours pas. si vous voulez que votre requête multimédia fonctionne avec ce fichier javascript, ajoutez un écran à votre ligne de requête multimédia en css

Voici un exemple :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Ligne de lien aussi simple que la ligne ci-dessus.

Mohsen
la source
12

Aujourd'hui, j'ai eu une situation similaire. La requête multimédia n'a pas fonctionné. Au bout d'un moment, j'ai trouvé cet espace après «et» manquait. Une requête multimédia appropriée doit ressembler à ceci:

@media screen and (max-width: 1024px) {}
dklog79
la source
1
C'est pourquoi nous avons des validateurs CSS. Cela n'est pas pertinent pour ce problème particulier car l'OP souligne déjà que les requêtes multimédias fonctionnent en fait dans des navigateurs non mobiles.
cimmanon
4
J'ai toujours trouvé cela utile car c'était le problème dans mon cas
Loren Shqipognja
4

L'ordre séquentiel du code css est également important, par exemple:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

le code ci-dessus ne fonctionnera pas car l'ordre exécuté. Besoin d'écrire comme suit :

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}
XC
la source
C'est l'erreur que je faisais. Je vous remercie.
VorganHaze
4

Mentionnez toujours max-width et min-width dans certaines unités comme px ou rem. Cela a compris pour moi. Si je l'écris sans l'unité et uniquement la valeur numérique, le navigateur ne peut pas lire les requêtes multimédias. exemple: c'est faux @media uniquement écran et (max-width: 950) et c'est juste @media uniquement écran et (max-width: 950px)

ANURAG BHAKUNI
la source
Je vous remercie! Bien que je regardais tous les exemples, je n'ai jamais remarqué que j'avais oublié le px!
markand
2

Jeter une autre réponse dans le ring. Si vous essayez d'utiliser des variables CSS, cela échouera tranquillement.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Les variables CSS ne fonctionnent pas dans les requêtes multimédias (de par leur conception).

Seth
la source
2

Raison étrange que je n'ai jamais vue auparavant: si vous utilisez un sélecteur "parent> enfant" en dehors de la requête multimédia (dans Firefox 69), cela pourrait casser la requête multimédia. Je ne sais pas pourquoi cela se produit, mais pour mon scénario, cela n'a pas fonctionné ...

@media whatever {
    #child { display: none; }
}

Mais en ajoutant le parent pour correspondre à un autre CSS plus haut dans la page, cela fonctionne ...

#parent > #child { display: none; }

Il semble que la spécification du parent ne devrait pas avoir d'importance, car un identifiant est très spécifique et il ne devrait y avoir aucune ambiguïté. C'est peut-être un bogue dans Firefox?

PJ Brunet
la source
2

L'extrait de code de l'OP utilise clairement le balisage de commentaire correct, mais le CSS peut se rompre de manière progressive - donc, s'il y a une erreur de syntaxe, tout ce qui suit est susceptible d'échouer. Quelques fois, je me suis appuyé sur des sources fiables qui ont fourni un balisage de commentaire incorrect qui a cassé ma feuille de style. Étant donné que l'OP n'a fourni qu'une petite section de son code, je suggère ce qui suit:

Assurez-vous que tous vos commentaires CSS utilisent ce balisage /*... */- qui est le balisage de commentaire correct pour css selon MDN

Validez votre css avec un linter ou un validateur en ligne sécurisé. En voici un par W3

Plus d'informations: Je suis allé vérifier les derniers points d'arrêt de requête multimédia recommandés dans bootstrap 4 et j'ai fini par copier la plaque chauffante directement à partir de leurs documents. Presque tous les blocs de code étaient étiquetés avec des commentaires de style javascript //, ce qui a cassé mon code - et ne m'a donné que des erreurs de compilation cryptiques avec lesquelles résoudre le problème, ce qui m'a dépassé la tête à l'époque et m'a causé de la tristesse.

L'éditeur de texte IntelliJ m'a permis de commenter des lignes spécifiques de css dans un fichier LESS en utilisant le raccourci clavier ctrl + /, ce qui était génial sauf qu'il insère //par défaut sur des types de fichiers non reconnus . Ce n'est pas un logiciel gratuit et moins est assez courant, alors je lui ai fait confiance et je l'ai suivi. Cela a cassé mon code. Il existe un menu de préférences pour lui apprendre le balisage de commentaire correct pour chaque type de fichier.

Cameron Donahue
la source
1
OP utilise déjà le balisage de commentaire correct, comme indiqué dans l'article .
TylerH
En fait, si vous survolez le bouton de vote défavorable, vous verrez exactement à quoi ils servent . En dehors de cela, les votes négatifs sont 1) anonymes et 2) non trolling. De plus, enflammer quelqu'un n'est pas le moyen de l'amener à changer quelque chose que vous pensez avoir fait.
TylerH
Oh mon! Tu as sauvé ma journée.
limfinity
2

L'inclusion d'une balise Meta comme ci-dessous peut amener le navigateur à gérer différemment le zoom de la fenêtre.

<meta content="width=device-width, initial-scale=1" name="viewport" />

Daksh Patel
la source
1

J'ai également rencontré ce problème récemment, et j'ai découvert plus tard que c'était parce que je n'avais pas mis d'espace entre andet (. C'était l'erreur

@media screen and(max-width:768px){
}

Puis je l'ai changé en ceci pour le corriger

@media screen and (max-width:768px){
}
sdkcodes
la source
0

J'utilise quelques méthodes selon. Dans la même feuille de style, j'utilise: @media (max-width: 450px), ou pour séparer, assurez-vous d'avoir le lien dans l'en-tête correctement. J'ai jeté un œil à votre fixmeup et vous avez un tableau déroutant de liens vers css. Il agit comme vous le dites également sur le HTC Desire S.

benteh
la source
Jettera un coup d'œil au CSS, merci ... bon de savoir que cela fonctionne sur quelque chose.
redconservatory
0
@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}
Ketam Srinivas
la source
7
veuillez ajouter une explication à votre code, montrant comment cela résout le problème - cela aidera d'autres personnes à l'avenir, et votre réponse est plus susceptible d'être votée
Our Man in Bananas
2
Bien que cet extrait de code puisse résoudre la question, inclure une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Ferrybig le
0

Pour moi j'avais indiqué max-heightau lieu de max-width.

Si c'est vous, allez le changer!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }
Ruto Collins
la source
0

Cela peut également se produire si le niveau de zoom du navigateur n'est pas correct. Le zoom de la fenêtre de votre navigateur doit être de 100%. Dans Chrome, utilisez Ctrl + 0pour réinitialiser le niveau de zoom.

Suhail AKhtar
la source
1
Cela n'aurait pas dû être rejeté. C'était la réponse à mon problème frustrant!
Amir Almusawi le