BONJOUR,

j'essaie de trouver une solution à un problème ordinaire qui intéresse
tous les développeurs :

un site est organisé en 3 colonnes de largeur variable.
Lorsque la largeur d'écran est inférieure à 570 px, ce 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

3 réponses


Pourquoi ne pas utiliser bootstrap qui va te faciliter la gestion des devices ?

Bonjour Pierre,

On ne travaille jamais en cm pour le web. C'est quasiment impossible, car tous les smartphones n’ont pas la même densité en pixel.

Salut, il y'a pas vraiment de solution, perso j'ai choisi ça à taton pour avoir un résultat acceptable sur tout les écrans de smartphone.
@media only screen and (min-width:701px)
@media only screen and (min-width:1008px)
bootstraps est aussi une bonne solution.