Set d'adaptation par support

EH TOI LÀ !

Cette page est utilisée pour le fonctionnement du site,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.


Ce code permet d'afficher ou non des contenus différents sur les appareils mobiles et ordinateurs ou autres écrans de plus grande taille.

» Exemple d'utilisation (à regarder depuis les deux supports pour pouvoir observer la différence)

Attention : L'usage de ce code impliquant une redondance puisque deux versions alternatives du même contenu sont disposées dans les deux blocs div ; il rend donc l'édition du texte d'un article plus confuse et facilite les erreurs. Pour cette raison, son usage n'est autorisé qu'avec du code et sans contenir du texte de l'article lui-même — les seules exceptions à cette règle étant les pages officielles du site en raison de l'importance primordiale de leur lisibilité.

Instructions d'utilisation

Placez le premier bloc tout en haut du code de votre page puis utilisez les deux suivants pour le contenu à adapter.

[[include component:media-query]]

[[div class="desktop"]]
[Contenu affiché sur ordinateur et pas sur portable]
[[/div]]

[[div class="portable"]]
[Contenu affiché sur portable et pas sur ordinateur]
[[/div]]


Code

@media only screen and (min-width: 767px) {
.desktop {
     display: block;
     visibility: visible; }
.portable {
     display: none;
     visibility: hidden; }
}
 
@media only screen and (max-width: 767px) {
.desktop {
     display: none;
     visibility: hidden; }
.portable {
     display: block;
     visibility: visible; }
}
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License