[Résolu] Mediaqueries : valeur du minwidth en rem

Bonjour,

Je suis dans une approche mobile-first et je souhaitais avoir trois tailles de police , à savoir: 14px jusqu'à une largeur de 640px, puis 16px jusqu'à 1400px et ensuite 18px.

/* Petits écrans (default) */
html { font-size: 87,5%; }

/* Ecrans moyens (640px) */
@media (min-width: 40rem) {
html { font-size: 100%; }
}

/* Ecrans larges (1400px) */
@media (min-width: 87,5rem) {
html { font-size: 112.5%; }
}

La question que je me pose ( les min-width en rem, c'est ceux correspondant à une taille de 16px=100% quand je ne modifiais pas la taille d ela police suivant la taille de l'écran). c'est si je ne devais pas au contraire tenir compte de la taille en cours.

C'est à dire d'indiquer pour l'équivalent de 640px en rem , non pas 40 rem mais 45.714 rem ( soit 640px/14px).

Cordialement
Modifié par cpalo (03 Oct 2014 - 11:21)

J'ai testé avec diverses résolutions, et en modifiant la taille de base ( de 50% à 120%) et il apparaît que le min-width en rem reste calculé sur la même valeur de 1 rem=16px , tandis que la police de base redéfinie dans la condition du médiaquerry change bien.

Par contre je ne vois pas l'interêt d'utiliser le min-width en rem.

Cordialement
Modifié par cpalo (03 Oct 2014 - 11:32)

Je porte ce complément pour avoir des avis.
Je suis en mobile-first
Mes breakpoints seront bien entendu affinés lorsque je serai sur un site de production.
Alors je veux bien vos avis ou conseils.
Cordialement

Mon médiaquerry:

html {
	font-size: 87.5%;   /* reset de 1 rem = 14px (100% de 16px) */ 
 } 
    @media screen and (min-width:40rem) { html { font-size: 100%; } }   /* reset de 1 rem = 16px pour largeur à partir de 640px */ 
    @media screen and (min-width:60rem) { html { font-size: 112.5%; } } /* reset de 1 rem = 18px pour largeur à partir de 960px */ 
    @media screen and (min-width:80rem) { html { font-size: 125%; } }   /* reset de 1 rem = 20px pour largeur à partir de 1280px */