1485 sujets

Web Mobile et responsive web design

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].

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