Media queries mit rem-Einheiten in Chrom?

Ist es möglich rem Einheiten in Chrom media queries?

rem Geräte arbeiten einwandfrei in Chrome, es scheint nur, dass Sie nicht unterstützt Medien-Anfragen. Ist das möglich? Oder ist es etwas anderes falsch mit diesem CSS?

body { background-color: yellow; }

@media only all and (max-width: 40rem) {
    body { background-color: red; }
}

@media only all and (min-width: 40rem) and (max-width: 60rem) {
    body {background-color: green;}
}

@media only all and (min-width: 60rem) {
    body { background-color: blue; }
}

Live at http://jsfiddle.net/jsQ2N/2/show/, em-only-version auf http://jsfiddle.net/jsQ2N/3/show/.

  • Es sieht aus wie diese problem umgangen werden kann mit em Einheiten. Bei der media-query-Ebene 1em sollte gleich 1rem (oder so schlägt <github.com/scottjehl/Respond/issues/18#issuecomment-2205078>).
  • Chrome 28.0.1500.95 unterstützt rem Einheiten in media queries, aber anscheinend Safari 5.1 nicht...
InformationsquelleAutor gioele | 2012-08-30
  1. 12

    Die spec sagt, das über die relativen Einheiten wie die beiden rem und em:

    Relative Einheiten im media queries basieren auf den ursprünglichen Wert, was bedeutet, dass die Einheiten nie die basierend auf den Ergebnissen von Erklärungen. Zum Beispiel, im HTML, die 'em' Einheit ist bezogen auf die ursprünglichen Wert von 'font-size'.

    (Der anfängliche Wert font-size ist medium, die in der Regel gleich der Standard-Schriftgröße im browser des Benutzers Einstellungen.)

    Da Media Queries 3 nicht definiert spezielle Regeln für Besondere Einheiten, die neben den oben genannten quote auf die relative Einheiten rem sollte handeln, wie em arbeiten aus den anfänglichen Wert font-size. Wenn es nicht funktioniert in Chrome, es ist höchstwahrscheinlich ein bug.

    • Von der gleichen Logik, es wäre nicht in der Lage zu erhalten, die relative font-size einer em entweder!
    • Du hast Recht. Ich bin mir nicht sicher, was ich dachte, als ich schrieb, dass. Behoben.
    InformationsquelleAutor BoltClock
  2. 5

    Es stellt sich heraus, dass dies Webkit-Ausgabe #78295 (unresolved als 2012-08): Unterstützung für CSS-Einheit rem in Media Queries (über http://fvsch.com/code/bugs/rem-mediaquery/).

    • Es ist also ein bug! Schön finden.
    • Gut, das Reporter sagen, dass es ein Fehler ist, auch, weil es funktioniert in anderen Motoren. Chrome-Entwickler haben noch nicht gesprochen.
    • Nach ein paar Stunden der Verwirrung, es scheint, dass die Verwendung von rem ' s in den @media-Regeln, bricht styles in Safari. em und px funktionieren. Komisch.
    InformationsquelleAutor gioele
  3. 0

    Nach Veröffentlichung der Antwort unter diese Frage nervte mich. Ich habe ein wenig mehr Tests in Chrome mit der site an der ich arbeite. Der Beitrag über rem ist ein Fehler in Chrome korrekt ist, Sie funktioniert nicht, also ich bin ändern, um die Pixel nur für den media queries.

    *Ihre Frage zu beantworten, rems sind, für mich zu arbeiten, um die Höhe einzustellen, der einen content-Bereich mit media queries. Es ist wie Chrome interperets browser-Breite, die scheint zu unterscheiden sich von Firefox, aber das ist nicht eine rem-basiertes problem.

    Im Hinterkopf behalten, wenn ich Sie benutze, rems und ems wird es nach der Einstellung font-size: 1em; oder font-size: 16px; für html oder body. Ich bin Neigung zu kleben, um font-size: 1em; auf der html-tag. Das schafft einen Standard, der funktioniert von welcher der Benutzer gesetzt hat, für eine Standard-Schriftgröße, auf welchem Gerät Sie gerade verwenden. Rem ist relativ zum root-Wert von 1em. Das root-Wert ist angegeben, indem der Benutzer die Standard-schriftart,-Größe, so sollte alles-Skala entsprechend den user-font-size-Präferenz und Geräte - /pixel-Dichte unabhängig.

    Dies bedeutet, ob der Benutzer mit einem "normalen" 72 oder 96 pixel/Zoll-Gerät, oder eine Netzhaut - (oder andere hohe Pixeldichte Bildschirm) sollte alles Aussehen "relativ" die gleiche von Gerät zu Gerät.

    InformationsquelleAutor Max West
Schreibe einen Kommentar