[Partage] Classes CSS affichage smartphone only...desktop only

[ManuelVoileux]

Bonjour tout le monde ,
Après quelques heures de bricolage , j'ai défini des classes CSS pour afficher des modules, sur smartphone uniquement (largeur 0-576 px), sur gros smartphone uniquement (largeur 576px-768 px),sur tablette uniquement (largeur 768px-992 px), sur desktop uniquement (largeur supérieure à 992px). J'ai trouvé les éléments des briques constitutives sur la page Breakpoints-Bootstrap v5.0 citée en référence.

Ce que j'ai mis du temps à comprendre, c'est que non seulement il faut indiquer quand afficher, mais aussi quand ne pas afficher, et comment construire une suite d'instructions homogènes sans mélanger min-width et max-width. Je n'ai pas su faire des instructions compactes @media qui inclueraient une plage de valeurs de pixels, alors j'ai empilé les instructions pour une même classe. Enfin l'idée des fractions de pixels viennent de la page bootstrap citée en référence.

Je ne doute pas qu'il existe d'autres solutions plus simples, ou qui utilisent mieux des classes déjà définies dans Joomla et que je n'ai pas su trouver. Toute proposition bienvenue. En souhaitant que celà aide quelqu'un.

Le lien exact est getbootstrap/docs/5.0/layout/breakpoints. Le lien en référence se transforme et renvoie systématiquement à la page d'accueil de bootstrap.
Pour une raison que je ne sais pas expliquer je n'ai plus accès au code, ou à l'insertion de liens dans l'éditeur. Pas urgent , pas grave.

[CODE]-------------------------
/*!
* class smartphone-only (0 - 576px)
*/
.smartphone-only {
display: block;
}
@media (min-width : 575.98px) {
.smartphone-only {
display: none;
}
}

/*!
* class big-smartphone-only (576px - 768px)
*/
.big-smartphone-only {
display: none;
}
@media (min-width : 576px) {
.big-smartphone-only {
display: block;
}
}
@media (min-width : 767.98px) {
.big-smartphone-only {
display: none;
}
}

/*!
* class tablet-only (768px - 992px)
*/
.tablet-only {
display: none;
}
@media (min-width : 768px) {
.tablet-only {
display: block;
}
}
@media (min-width : 991.98px) {
.tablet-only {
display: none;
}
}

/*!
* class desktop-only (992px et au dela)
*/
.desktop-only {
display: none;
}
@media (min-width : 992px) {
.desktop-only {
display: block;
}
}
[Code]