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

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?

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 ...

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

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) { }

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.

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) {}

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

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)

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).

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?

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.

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" />

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){
}

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.

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

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

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.