Adapter aux écrans

Vous reprenez une page dont l'affichage mobile est cassé. Le code semble pourtant explicite : <div class="lg:flex md:flex-col sm:hidden">. Vous réduisez la fenêtre et le comportement n'a aucun sens — l'élément disparaît sur tablette, réapparaît sur téléphone, et le passage en colonne ne se produit jamais. Vous ajoutez un sm:block, ce qui règle un cas et en casse deux autres. Au bout d'une heure, vous avez sept préfixes empilés et vous testez au hasard.

Toute la confusion tient dans un malentendu sur un mot. md: ne signifie pas « sur écran moyen », mais « à partir de 768 pixels et au-delà ». Ce sont des seuils de largeur minimale, pas des tranches. sm:hidden ne cache donc pas l'élément sur les petits écrans : il le cache à partir de 640 pixels, c'est-à-dire sur tous les écrans sauf les petits. Une fois ce point admis, l'écriture devient mécanique et vous n'empilez plus jamais sept préfixes.

Les seuils, et ce qu'ils veulent dire