Texte différent sur version mobile et web
Résolu
tiran58
Messages postés
67
Statut
Membre
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerai savoir si il et possible de mettre un text différent en fonction du css
Exemple :
Titre version pc : comment ça marche
Titre version mobile : c-ç-m
si oui comment faire ?
merci d'avance
J'aimerai savoir si il et possible de mettre un text différent en fonction du css
Exemple :
Titre version pc : comment ça marche
Titre version mobile : c-ç-m
si oui comment faire ?
merci d'avance
2 réponses
-
salut
sinon en javascript tu peux faire ca (ne prend pas en charge le redimensionnement) donc reduire et actualiser pour vérifier
<p id="change">ecran plus grand de 600 px</p> <script> var w = document.documentElement.offsetWidth; var elem = document.getElementById("change"); if ( w < 600 ) { elem.innerHTML="ecran plus petit que 600px";} </script>
sinon il y la solution suivante en ecrivant 2 fois le texte et cacher la version non désirée avec les class (mob ecran inférieur à 600px et nonmob supérieur à 600px)
<p class="mob">ecran plus petit que 600 px</p> <p class="nonmob">ecran plus grand que 600 px</p> <p class="mob">version mobile</p> <p class="nonmob">version ordinateur</p> <p> Ici le texte pour toutes les versions</p> <script> var w = document.documentElement.offsetWidth; var mobile = document.getElementsByClassName("mob"); var nonmobile = document.getElementsByClassName("nonmob"); if (w > 600) {for(var i = 0; i < mobile.length; i++) { mobile[i].style.display = 'none'; }} else {for(var i = 0; i < nonmobile.length; i++) { nonmobile[i].style.display = 'none'; }} </script>
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.-
Que je suis bete j'ai pas pensé à la solution media querie !
<p class="mobile">version mobile</p> <p class="nonmobile">version pc</p>
.mobile {display:none;} .nonmobile {display:block;} @media screen and (max-width: 600px){ .mobile {display:block;} .nonmobile {display:none;} } -
-
non c'est pas la meme chose
la solution que je donne permet le referencement du texte
prosthetiks utilise un ::before dans le css pour rajouter le texte (donc pas référencé)
moi le texte est dans le html et display none ou block suivant le max-width en media queries -
-
exact peut e^tre mettre un span avec display:inline; ou display none dans les h1, h2 ....
genre<h1><span class="mobile">moins de 600</span><span class="nonmobile">plus de 600</span> pixels</h1>
évidement en faisant attention au keyword stuffing
-
-
En utilisant les pseudo-elements :before et :after tu peux setter un content différent en fonction de la résolution. Pour le titre, pas moyen en CSS, tourne toi vers le JS.
