[Résolu] Comment savoir si une media querie est active ?

Bonsoir,

Je souhaiterais pouvoir modifier mon code HTML en fonction de la largeur de l'écran. Est-ce possible ?

En pratique, je souhaiterais ajouter des abréviations sur mon code si l'écran est de faible largeur (et qu'il y a de l'overflow hidden d'activé, cause media queries).

Avez-vous des pistes pour réaliser cela ?

Bonjour. Oui c'est tout à fait possible et cela sans utiliser de media-queries, car en général, quand ce code est nécessaire, il est nécessaire quel que soit la largeur de l'écran :

.onaline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Sinon, pour répondre à la question du titre du topic, on peut vérifier qu'un media querie fonctionne en changeant la couleur de fond d'un élément ou d'un texte par exemple : CodePen
Modifié par Olivier C (01 Jun 2022 - 13:04)

Olivier C a écrit :
Bonjour.

Sinon, pour répondre à la question du titre du topic, on peut vérifier qu'un media querie fonctionne en changeant la couleur de fond d'un élément ou d'un texte par exemple : CodePen

Bonsoir, merci pour la réponse, mais je pense qu'il y a confusion :
Mon but n'est pas de vérifier qu'une media querie fonctionne, mais de modifier mon code HTML en fonction de son activation.
Si on reprend l'exemple ci-dessus, je souhaiterais que quand l'écran est redimensionné, le carré change de couleur, mais surtout qu'un texte apparaisse sur le carré, mais différent en fonction de la couleur.
exemple :
A 40em, le carré indique "Dimension 1"
A 50em, le carré indique "Test 2"
A 60em, le carré indique "Essai 3"
etc.
Modifié par ltr (01 Jun 2022 - 22:44)

Bonjour,
dans ce cas, tu pourrais utiliser display:none; ou display:-2000px; mais ce n'est pas très élégant, voire pas conseillé, surtout sur un grand nombre de fichiers.
En un mot, tu mets dans ton html tous les textes qui doivent apparaître sur chaque carré de couleur et dans le css tu mets display:none; sur le @media où il doivent disparaître. Il faut bien sûr que chaque carré de couleur ait une class différente.
Et les fichiers mis en display:none; seront de toute façon téléchargés. Pas visibles mais téléchargés.
Ou alors tu charges un css différent pour chaque dimension donnée par @media, mais ça devient lourd.

Ce qui est bien avec le code, c'est qu'on en apprend tous les jours

Olivier C a écrit :
Il serait tout a fait possible de faire tout en CSS avec la propriété content :

@media (min-width: 40em) {
  .logo {
    background-color: Orange;
  }
  .logo::after {
    content: "Dimension 1";
  }
}

Mais il est déconseillé d'avoir recours aux styles pour afficher du contenu.

Bonsoir et merci pour la réponse,
Je pense m'en servir en modifiant une variable que je vérifierais avec PHP.

Ca devrait faire le job.

Passage en résolu.

Oui, mais attention car - comme je le disais plus haut - cette méthode est normalement réservée aux styles, pour des éléments décoratifs par exemple. Ce n'est pas du tout accessible.