Ändern font-size auf Wurzel wirkt sich nicht auf @media fragt

Question

ich auf einer Seite arbeiten, die

html { 
    font-size: 62.5%; 
} 

hat Das bedeutet 1rem = 10px statt 1rem = 16px So weit, so gut.

Das Problem ist, dass es @media queries nicht betrifft.

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

Überprüfen Sie diesen Codepen, um das Problem zu sehen.

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

ich auf einem Retina-Monitor getestet, mit Chrome und Firefox. Auf Safari tritt das Problem nicht auf.

Irgendeine Lösung?

Answer 1

Ich habe das Problem gefunden. In @media müssen Sie em verwenden und es wird immer die Standardgröße des Browsers lesen und Ihre benutzerdefinierte font-size ignorieren. Das gleiche passiert nicht mit rem. Also in diesem Fall müssen Sie 37.5em (600/16) einstellen, und es wird die auf 600px in jedem Browser einschließlich Safari ändern.

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

(...) die einzige Einheit, die konsequent in allen vier Browsern ausgeführt ist em. Es gibt keine Unterschiede zwischen em und rem mit Ausnahme von Fehlern, die in Safari gefunden wurden. (...) Leider blieben px-Medienabfragen im dritten Experiment bei 400px, was es zu einem No-Go macht, wenn Sie Benutzer unterstützen möchten, die den Schriftgrößenwert ihres Browsers ändern. Daher ist meine Schlussfolgerung nach diesen Experimenten: Verwenden Sie em Medienabfragen.

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

Answer 2

Versuchen Sie, diese

<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; 
    } 
} 

dieses codepen sehen - http://codepen.io/anon/pen/aJbxOQ

Answer 3

Nein, es nicht mit Ihnen htmlfont-size oder Ihre .elfont-size nichts zu tun hat. Weil 1rem 16px ist. Also musst du es nach 16px berechnen.

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

Dies wäre Ihre 600px Medienabfragen bricht.