Bonjour,
j'avais précedemment posé cette question...
Au lieu d'utiliser des pixels, utilisation d'une unité fluide donc le rem.
Ici l'illustration du problème: http://dvpts.cahue.net/site-demo/demo-mediaqerries-rem.html[/url].
La modification de la valeur du rem dans la balise html est bien prise en compte: widt, height, fontsize...
Mais , et c'est là que je souhaiterai une confirmation ou un avis: @media screen and (min-width: 64rem) considère que le rem vaut toujours 100% soit 16px. et non pas à 125% comme cela avait été changé dans le mediaquerry précédent.
Cordialement
j'avais précedemment posé cette question...
Au lieu d'utiliser des pixels, utilisation d'une unité fluide donc le rem.
Ici l'illustration du problème: http://dvpts.cahue.net/site-demo/demo-mediaqerries-rem.html[/url].
html {
font-size: 100%; /* reset de 1 rem = 16px (100% de 16px) */
}
@media screen and (min-width: 720px) {
html { font-size: 125%; } /* reset de 1 rem = 20px */
}
.mediaquerries-px {
height: 80px;
width: 480px;
margin: 16px;
background-color: violet;
}
@media screen and (min-width: 720px) {
.mediaquerries-px { background-color: lightblue; width: 600px; }
}
@media screen and (min-width: 1024px) {
.mediaquerries-px { background-color: khaki; }
}
.mediaquerries-rem {
height: 5rem;
width: 30rem;
margin: 16px;
background-color: violet;
}
@media screen and (min-width: 45rem) {
.mediaquerries-rem { background-color: lightblue; }
}
@media screen and (min-width: 64rem) {
.mediaquerries-rem { background-color: khaki; }
}
La modification de la valeur du rem dans la balise html est bien prise en compte: widt, height, fontsize...
Mais , et c'est là que je souhaiterai une confirmation ou un avis: @media screen and (min-width: 64rem) considère que le rem vaut toujours 100% soit 16px. et non pas à 125% comme cela avait été changé dans le mediaquerry précédent.
Cordialement