BONJOUR,
 
 
j'essaie de réaliser un site qui est organisé en 3 colonnes
de largeur variable.
Lorsque la largeur d'écran est inférieure à 570 px, mon site
ne comporte plus qu'une seule colonne.
 
 
@media all and (max-width:569px)
{
   ...
}
 
@media all and (min-width:570px)
{
   ...
}
 
Jusque là, tout va bien...
Mais, bien des téléphones mobiles ont une excellente résolution
et ont plus de 570 px de large -> ils affichent donc les
3 colonnes ce que je ne souhaite pas car alors chaque colonne
mesure 1,5 cm de large !
 
Il faut donc tenir compte de la densité des pixels sur l'écran et
n'afficher qu'une seule colonne pour les petits (en cm) écrans
même s'ils comportent plus de 570 px de large.
Je ne sais pas faire.
 
Je précise que je suis débutant et que j'aimerais une explication
plus qu'un simple renvoi à une page de cours que je ne comprendrai pas .
 
Si une page de cours complète votre explication alors je
prends bien sûr !
 
Un grand merci à tous et expliquez lentement
je comprends... pas tout
 
PIERROT

Désolé mais tu ne trouveras probablement personne pour te rédiger un cours entier où on te prend par la main.  
Les forums ne sont pas trop faits pour ça, c'est plutôt le boulot des formateurs payés des sommes à 4 chiffres la journée.
 
Par contre on peut te donner des pistes pour que tu saches quoi chercher :
 
- Utiliser des frameworks qui prennent en charge (avec plus ou moins de bonheur) ces soucis, comme Bootstrap.
 
- Mieux comprendre ce dont tu parles :  
https://www.frandroid.com/comment-f [...] resolution
https://en.wikipedia.org/wiki/Compa [...] e_displays
 
- Savoir que la directive @media peut prendre d'autres infos que la résolution absolue, comme par exemple la résolution par pouce (dpi), etc. Quelques exemples ici : https://css-tricks.com/snippets/css [...] dia-query/