Changer la taille de la police sur la racine n'affecte pas @media requêtes

Question

Je travaille dans une page qui a

html { 
    font-size: 62.5%; 
} 

Cela signifie 1rem = 10px au lieu de 1rem = 16px Jusqu'à présent, si bon.

Le problème est qu'il n'affecte pas @media queries.

/* 
it should change at 600px and not 960px. 
the @media ignores the 62.5%; 
*/ 
@media (min-width: 60rem) { 
    .el { 
     background: blue; 
    } 
} 

Cochez ce codepour voir le problème.

http://codepen.io/sandrina-p/pen/bqGZjE

J'ai testé sur un écran de la rétine, avec Chrome et Firefox. Sur Safari, le problème ne se produit pas.

Une solution?

Answer 1

J'ai trouvé le problème. Dans @media vous devez utiliser em et il lira toujours la taille du navigateur par défaut, en ignorant votre font-size personnalisé. La même chose ne se produit pas avec rem. Donc, dans ce cas, vous devez définir 37.5em (600/16), et il va changer le à 600px dans tous les navigateurs, y compris Safari.

https://zellwk.com/blog/media-query-units/

(...) la seule unité réalisée de manière cohérente dans tous les quatre navigateurs est em. Il n'y a pas de différences entre em et rem à l'exception des bugs trouvés sur Safari. (...) Malheureusement, les requêtes px media sont restées à 400px dans la troisième expérience, ce qui rend impossible l'utilisation des utilisateurs qui modifient la valeur de taille de police de leur navigateur. Par conséquent, ma conclusion après ces expériences est: Utilisez em requêtes médias.

@media screen and (max-width: 37.5em) { 
    .el { 
     background: blue; 
    } 
} 

Answer 2

Essayez cette

<div class="el"> 
    hey there 
</div> 

// =========== basic template =========== // 
$safeArea: 1rem; 
body { 
    font-family: sans-serif; 
} 

// ======== actual codepen code ========= // 

html { 
    font-size: 62.5%; 
} 

.el { 
    background: red; 
    font-size: 1.6rem; 
} 

/* it should change at 600 px and not 960px. 
the @media ignores the 62.5%; 
*/ 
@media screen and (max-width: 60rem) { 
    .el { 
     background: blue; 
    } 
} 

voir ce codepen - http://codepen.io/anon/pen/aJbxOQ

Answer 3

Non, il n'a pas à faire quoi que ce soit avec vous htmlfont-size ou votre .elfont-size. Parce que 1rem est 16px. Donc, vous devez le calculer selon 16px.

@media (min-width: 37.5rem) { 
    .el { 
     background: blue; 
    } 
} 

Cela correspond à vos pauses de requête de médias 600px.