Jump to content
Invision Board France
  • 0
Sign in to follow this  
Bocar

4.5 Afficher un CSS que pour le responsive (mobile)

Question

Bocar

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.

Share this post


Link to post
Share on other sites

9 answers to this question

Recommended Posts

  • 0
cybero

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

Edited by cybero

Share this post


Link to post
Share on other sites
  • 0
Bocar
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.

Share this post


Link to post
Share on other sites
  • 0
Bocar

Bonjour.

 

Savez-vous comment afficher un style (attribut CSS) uniquement sur mobile ou uniquement sur desktop svp.

 

Merci.

Share this post


Link to post
Share on other sites
  • 0
cybero

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:

Share this post


Link to post
Share on other sites
  • 0
Bocar

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.

Edited by Bocar

Share this post


Link to post
Share on other sites
  • 0
cybero

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.

Share this post


Link to post
Share on other sites
  • 0
Bocar

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.

Share this post


Link to post
Share on other sites
  • 0
cybero

Comme indiqué plus haut, je n'ai pas testé mais effectivement oui cela devrait fonctionner comme cela :)

Share this post


Link to post
Share on other sites
  • 0
Bocar

Ça fonctionne.

 

Merci @cybero.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.