Aller au contenu
Invision Board France
  • 0

Afficher un CSS que pour le responsive (mobile)


Bocar

Question

Bonjour.

 

J'ai des class pour lesquelles j'aimerai que les attributs dans le CSS ne s'affichent que sur mobile (responsive) et pas sur PC bureau (je veux y afficher autre chose).

Que dois-je faire pour afficher les CSS de ces class que sur mobile ?

 

Merci.

Lien vers le commentaire
Partager sur d’autres sites

9 réponses à cette question

Messages recommandés

  • 0

Bonjour,

 

Tu as tout d'expliqué sur le site d'IPS, il y a des classes dédiées pour cela :) 

https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/responsiveness-r250/

Dans la section Basic show/hide functionality

 

Cela va te permettre d'afficher des sections en fonction du type d'écran de l'utilisateur.

Si tu ne veux afficher quelque chose que sur mobile, je pense qu'il suffit d'ajouter la classe ipsResponsive_showPhone

Modifié par cybero
Lien vers le commentaire
Partager sur d’autres sites

  • 0
Il y a 15 heures, cybero a dit :

Bonjour,

 

Tu as tout d'expliqué sur le site d'IPS, il y a des classes dédiées pour cela :) 

https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/responsiveness-r250/

Dans la section Basic show/hide functionality

 

Cela va te permettre d'afficher des sections en fonction du type d'écran de l'utilisateur.

Si tu ne veux afficher quelque chose que sur mobile, je pense qu'il suffit d'ajouter la classe ipsResponsive_showPhone

C'est le style CSS "margin: 0px;" d'une certaine classe dont je veux qu'il ne s'affiche que sur Desktop.

C'est dans la feuille de style CSS, pas dans le code HTML.

Donc mettre class="ipsResponsive_showDesktop" ne fonctionnerait pas pour faire un margin: 0px.

Ou de quelle façon l'utiliser dans ce cas si c'est ça ?

 

Merci.

Lien vers le commentaire
Partager sur d’autres sites

  • 0

Ah j'avais mal compris ton besoin !

 

Je sais comment créer une classe css entière qui ne va s'appliquer que pour tel ou tel type d'écran (Responsive).

Si tu mets ton attribut dedans et que tu appliques la classe (au lieu du style directement) à tes éléments HTML cela devrait marcher.

 

Par contre oui il faut ajouter la classe ET modifier la partie HTML afin d'ajouter la classe créée.

Exemples de classe en fonction du type d'écran (Non testé) :

/* Pour IPS les téléphones c'est max 767px */
@media screen and (max-width: 767px) {
  .classe_que_sur_telephone {
    margin: 0;
  }
}

/* Pour IPS les desktop c'est minimun 980px */
@media screen and (min-width: 980px) {
  .classe_que_sur_desktop {
    margin: 0;
  }
}

/* Pour info entre les 2 il y a le format tablette */
@media screen and (min-width: 768px) and (max-width: 979px) {
  .classe_que_sur_tablette {
    margin: 0;
  }
}

 

En fonction de ce que tu veux faire, bien entendu adapter le contenu des classes 😛 et l'ajouter sur les attributs HTML concernés.

 

J'espère que je suis dans le vrai cette fois :drop:

Lien vers le commentaire
Partager sur d’autres sites

  • 0

OK, merci.

 

Le 08/05/2021 à 09:59, cybero a dit :

/* Pour IPS les téléphones c'est max 767px */

 

Le 08/05/2021 à 09:59, cybero a dit :

/* Pour IPS les desktop c'est minimun 980px */

Tu  veux dire quoi par max 767px ou minimum 980px?

Ça correspond à quo ?

 

Merci.

Modifié par Bocar
Lien vers le commentaire
Partager sur d’autres sites

  • 0

Ce sont simplement des commentaires afin d'expliquer pourquoi j'ai mis ces valeurs là dans le code.

J'aurais par contre du préciser qu'il s'agit de la taille de la largeur de l'écran (max ou min selon les cas)

Par exemple :

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

Ne va s'appliquer que si la largeur de l'écran de l'utilisateur est inférieure à 768px.

C'est le type d'écran que IPS considère comme des téléphones.

Lien vers le commentaire
Partager sur d’autres sites

  • 0

OK.

 

Donc pour appliquer un margin: 0; uniquement sur desktop, je mets la classe "classe_que_sur_desktop" dans le code HTML et dans le CSS, j'utilise :

@media screen and (min-width: 980px) {
  .classe_que_sur_desktop {
    margin: 0;
  }
}

?

 

Merci.

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.

Invité
Répondre à cette question…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

Chargement
×
×
  • Créer...

Information importante

En utilisant ce site, vous êtes d’accords avec nos Conditions d’utilisation. Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookies, sinon nous supposerons que vous êtes d’accord pour continuer.