Bonjour
J'aurais besoin de quelques clarifications sur l'utilisation des @media queries.
J'ai une feuille de styles qui comporte la description d'une div contenant 3 images,appelons les A, B et C
Selon la taille des écrans d'affichage:
1) l'image A reste située à gauche, mais sa taille peut varier pour ne pas occuper toute la page pour des petits écrans
2) l'image B reste située à droite, sa taille en % ne semble pas avoir besoin de changer
3) l'image C doit être déplacée et sa taille changer pour ne pas entre en conflit avec des deux autres.
J'ai donc l'intention de mettre dans ma feuille de styles des @media queries pour traiter ce problème.
En gros j'ai besoin de traiter 3 situations:
1) taille de fenêtre supérieure à 800 pixels
2) taille entre 360 et 800 pixels
3) taille inférieure à 360 pixels
Les essais que j'ai effectués ne me donnent pas satisfaction. Faut-il redéfinir tout ce qui de près ou de loin a un rapport avec ces 3 images pour que ça fonctionne correctement?
J'ai essayé des choses du genre
J'obtiens à peu près n'importe quoi pour cette malheureuse imageC! En particulier pour les petits écrans < 360 je retrouve l'apparence des écrans > 800
Désolé de ne pas pouvoir vous montrer ces exemples, je les ai détruits ç force de faire des essais/erreurs (je sais, ce n'est pas professionnel...)
La documentation que j'ai lue ne me semble pas très claire, il est toujours question d'un seul objet et d'une seule taille limite. Je comprends bien que pour un tutoriel il faut rester simple,mais si quelqu'un pouvait me donner un exemple concret qui fonctionne, je lui en serais reconnaissant.
J'aurais besoin de quelques clarifications sur l'utilisation des @media queries.
J'ai une feuille de styles qui comporte la description d'une div contenant 3 images,appelons les A, B et C
Selon la taille des écrans d'affichage:
1) l'image A reste située à gauche, mais sa taille peut varier pour ne pas occuper toute la page pour des petits écrans
2) l'image B reste située à droite, sa taille en % ne semble pas avoir besoin de changer
3) l'image C doit être déplacée et sa taille changer pour ne pas entre en conflit avec des deux autres.
J'ai donc l'intention de mettre dans ma feuille de styles des @media queries pour traiter ce problème.
En gros j'ai besoin de traiter 3 situations:
1) taille de fenêtre supérieure à 800 pixels
2) taille entre 360 et 800 pixels
3) taille inférieure à 360 pixels
Les essais que j'ai effectués ne me donnent pas satisfaction. Faut-il redéfinir tout ce qui de près ou de loin a un rapport avec ces 3 images pour que ça fonctionne correctement?
J'ai essayé des choses du genre
#imageC {....}
@media screen and (max-width: 800px) {
#imageC {....}
}
@media screen and (max-width: 360px) {
#imageC {....}
}
J'obtiens à peu près n'importe quoi pour cette malheureuse imageC! En particulier pour les petits écrans < 360 je retrouve l'apparence des écrans > 800
Désolé de ne pas pouvoir vous montrer ces exemples, je les ai détruits ç force de faire des essais/erreurs (je sais, ce n'est pas professionnel...)
La documentation que j'ai lue ne me semble pas très claire, il est toujours question d'un seul objet et d'une seule taille limite. Je comprends bien que pour un tutoriel il faut rester simple,mais si quelqu'un pouvait me donner un exemple concret qui fonctionne, je lui en serais reconnaissant.
