Modifier html suivant la taille de l'écran

juju2901
Les bases HTML/CSS

Bonjour à tous,

Je voudrais savoir s'il existait une technique pour modifier le html suivant la taille de l'écran ?
Je m'explique. J'ai découvert récemment la possibilité de rajouter un lien cliquable pour les numéros de téléphones (apperemment tous les smartphones ne gère pas bien ces numéros sinon)

Par exemple :

<a href="tel:+332...">02...</a>

Comment je peux faire pour que ce lien ne soit visible uniquement quand il passe en dessous d'une certaine résolution d'écran ? Actuellement il s'affiche en lien cliquable même sur la version normal du site, ce que je ne trouve pas terrible étant donnée que sur un ordi ça ne déclenche aucune action...

Merci

3 réponses

Benjamin Derepas
Réponse acceptée

Les framework CSS fournissent des classes spécifique que tu peux utiliser .
Si tu n'utilise pas de framework, tu peux créer des propres classes en passant par les media queries, par exemple :

@media (min-width: 1200px) { .maClass{display:none;}}

A toi d'adapter

Pewel-OutOfNutella

Pour afficher ou cacher des éléments en fonction de la taille du navigateur, tu as aussi la possibilité avec du js/jQuery.

if($(window).width() < 1000) { //la taille que tu souhaites
    $("#maDiv").append("<p>Mon code html</p>);
}
juju2901
Auteur

On ne peux pas faire plus efficace.

Je ne connais pas encore le Js donc je pense que je vais utiliser les media queries (en plus il y en à déjà un peu dans mon code héhé).
ça fonctionne impec' avec un petit display:none;

merci à vous les gars.