Die REM-zu-PX-Beziehung: So schreiben Sie besser zugängliche Medienabfragen

Wir sind Entwickler. Wir möchten die reaktionsschnellsten Layouts entwickeln. Wir möchten unterschiedliche Geräte, Auflösungen und Benutzereinstellungen berücksichtigen. Wir möchten in allen Stylesheets konsistente Einheiten verwenden. Wir wollen so wenig Mathematik wie möglich machen.

Wann wollen wir das? JETZT!
Was müssen wir wissen? Eine Menge Zeug!
Wie machen wir das? Mit einer benutzerdefinierten SASS-Funktion!

Durch die Verwendung einer SASS-Funktion können wir mehr Benutzern entgegenkommen, indem wir ihre System- und Browsereinstellungen verstehen und berücksichtigen. Ich werde darauf eingehen, wie Rem-Werte mit Pixelwerten zusammenhängen und was sich auf die Beziehung zwischen ihnen auswirken könnte. 1rem beginnt fast immer mit 16 Pixeln, aber es gibt Möglichkeiten, wie ein Benutzer das ändern kann. Diese SASS-Funktion, über die wir später schreiben werden, ist sehr hilfreich, da sie auf ein größeres Projekt angewendet werden kann und schrittweise in Ihre bestehenden Projekte eingeführt werden kann.

Hintergrund

Was mich dazu gebracht hat, mich mit diesem Thema zu beschäftigen, war der Artikel There's No Such Thing as a Desktop Screen von Hajime Yamasaki Vukelic, in dem er zum Thema Responsive Design sagt: „Bei der Reaktionsfähigkeit geht es nicht um einen einfachen Satz willkürlicher Bildschirmbreiten ...“ Bei der Reaktionsfähigkeit geht es um Robustheit: Wie weit kann man die Seite dehnen oder zusammendrücken, bevor sie auseinanderzufallen beginnt?“ Hajime spricht darüber, wie sein Vater im Wesentlichen zu 400 % regelmäßig im Internet surft. Auch wenn dies wie ein Grenzfall erscheinen mag, ist es wichtig zu wissen, auf welche Weise ein Benutzer seine Anzeige skalieren kann und wie sich diese Änderungen in den Einstellungen auf die von uns geschriebenen Stile auswirken.

Skalierte Anzeige

Beginnen wir so klein wie möglich damit, genau zu verstehen, was ein Pixel ist. Für einen Entwickler gibt es zwei Arten von Pixeln: Es gibt Gerätepixel, bei denen es sich um die Menge an Lichtpunkten auf einem bestimmten Bildschirm handelt, und es gibt CSS-Pixel, bei denen es sich um eine Maßeinheit handelt. Gerätepixel sind normalerweise nicht gleich CSS-Pixel. Es ist wichtig, den Unterschied zwischen den beiden zu verstehen, damit wir herausfinden können, welche Einstellungen sich auf die einzelnen Werte auswirken.

Es gibt mehrere Möglichkeiten, wie ein Benutzer wie Hajimes Vater die Größe des Inhalts auf seinem Bildschirm ändern kann. Die gebräuchlichsten Möglichkeiten, wie ein Benutzer seine Anzeige skalieren kann:

• Ändern der Bildschirmauflösung (Systemeinstellung)
• Vergrößern der Browser-Registerkarte (auf dem Mac drücken Sie ⌘ und +, Windows Strg und +)
• Erhöhen der Schriftgröße in den Browsereinstellungen.

Die erste und zweite Option, das Ändern der Bildschirmauflösung und das Zoomen im Browser, bewirken im Wesentlichen dasselbe. Bei beiden Methoden werden die CSS-Pixel so skaliert, dass jedes CSS-Pixel mehr Gerätepixel einnimmt. In diesem Fall wird unser Layout proportional skaliert. 1rem entspricht immer noch 16 Pixel, aber jedes CSS-Pixel nimmt mehr Gerätepixel ein. Um dies zu testen, können Sie den Browser-Tab vergrößern, bis Sie das „mobile“ Layout auslösen. Diese Einstellung lässt sich schnell testen und sollte im Allgemeinen keine großen Probleme verursachen.

Das Ändern der Browser-Schriftgröße führt zu den größten Änderungen. Standardmäßig ist die Einstellung des Browsers „mittel“, was in Chrome bedeutet, dass 1rem 16 Pixel beträgt. Wenn der Benutzer die Schriftgröße erhöht, erhöht sich der Wert von 1rem, andere Werte werden jedoch nicht skaliert. 1rem entspricht mehr CSS-Pixeln und belegt daher mehr Gerätepixel. Wenn in Chrome die Schriftgröße auf „sehr groß“ eingestellt ist, entspricht 1rem 24 Pixel. Die Größe der CSS-Pixel bleibt gleich, es ist die Grundschriftgröße, die sich geändert hat. Jeder Wert, der auf die Stammschriftgröße verweist, ist betroffen.

Wenn Sie in Ihrem Code eine Mischung aus Pixel- und REM-Werten haben, kann es zu Layoutproblemen kommen, da die REM-Werte skaliert werden, die Pixelwerte jedoch gleich bleiben. Das Bild oben zeigt ein einfaches Beispiel dafür, wie drastisch sich das Layout ändern kann, wenn der Text auf REM-Werte eingestellt wird, während die maximale Breite, die Spaltenbreite und die Abstände auf Pixelwerte eingestellt werden. Ein responsives Layout sollte entsprechend der Stammschriftgröße skaliert werden.

Das Problem mit Medienabfragen

So schreiben wir im Allgemeinen eine Medienanfrage:

@media (min-width: 1000px) {
    ...declarations here
}

Da wir versuchen, auf alle Benutzereinstellungen zu reagieren und sie anzupassen, möchten wir überall dort, wo wir können, relative Einheiten verwenden. Lassen Sie uns in der Medienabfrage einen rem-Wert anstelle von Pixeln verwenden:

@media (min-width: 62.5rem) {
    ...declarations here
}

Mit den Standardbrowsereinstellungen entsprechen 1000 Pixel 62,5rem
1rem = 16px
1000px / 16px/rem = 62,5rem
Das sieht aus wie Mathematik, die ich jedes Mal machen muss, wenn ich eine relative Einheit schreiben möchte. Wir haben gleich zu Beginn gesagt, dass wir nicht Mathe machen wollen.

Es gibt eine allgemeine Lösung, die wir alle kennen: 1rem = 10px. Dies geschieht im Allgemeinen beim Einrichten des Grundbausteins eines Projekts. Sie überschreiben die Stammschriftgröße im Stammelement, indem Sie auf den HTML-Selektor zielen:

html {
    font-size: 62.5% 
    // this is math 
    // but it only needs to be done once for the whole project 
    // so I'll let it slide
}

Now any time we want to convert a pixel value from the design to a rem value in our code we just have to carry the decimal one place.
1rem = 10px
To get a value of 1000px, we use 100rem. This still involves math but is fairly minor.

Now, when using a rem value, we can safely assume that 1rem will be 10px.
Right?
Yes?
Example?
No need. We know it is true. We have used rem for widths, heights, paddings, margins, translates or any other declaration without any issue. But…will there be any issue using it in the condition for a media query?

@media (min-width: 100rem) {
    // does is trigger at 1000px as expected?
    ...declarations here
}

Open the example in a new window and play with the width of the viewport. When the “desktop” media query triggers then the background will turn blue.

What is happening?

The values for a media query are calculated before any other rules are set, so the ruleset we applied to the html element in the start of our project will not be applied in the condition of the media query. According to this media query, 1rem is still equal to 16px. We expected 100rem to be 1000px but it ended up being 1600px.

If you change the browser font size to “very large” and refresh the example, you will notice that 1rem = 15px and the 100rem media query won’t trigger until 2400px. If your monitor isn’t wide enough to see that change happen, zoom out on the browser with ⌘/Ctrl and + .

The condition for the media query is not scaling consistently with the browser’s desired font size.

• Font size “Medium”:
  • 1rem = 10px
  • Media query: 100rem = 1600px
  • rem to px ratio: 0.0625
• Font size “Very Large”:
  • 1rem = 15px
  • Media query: 100rem = 2400px
  • rem to px ratio: 0.0416666667

For content and layouts to scale consistently, we need the rem to px ratio to always remain the same.

REMPX()

This has taken a long time to get to even suggesting a solution to a problem that we maybe didn’t know we had.

Let’s create a custom SASS function that will allow us to write our code in pixel values and be rendered as rem values. I came across this function on a legacy project at work but I believe it was heavily inspired by this quick article: Convert pixel values to rem, Sass style, by Bhargav Shah. Since this article was written, CSS introduced its own rem() function which calculates the remainder of a fraction so instead we’ll name our function rempx().

$html-font-size: 16px;

@function stripUnit($value) {
    @return $value / ($value * 0 + 1);
}

@function rempx($pxValue) {
    @return #{stripUnit($pxValue) / stripUnit($html-font-size)}rem;
}

//implementation:
.image {
  height: rempx(300px);
}

Open the example in a new window and play with the width of the viewport and change the browser font size (refresh the page after you update the font size).

Notice how after we change the browser font size to “very large” (after a page a refresh), the 1rem square becomes larger and you can see that 1rem is equal to 24px.

When used in the condition of a media query, a rempx value will scale accordingly with the browsers font size. With the font size set to “very large”, the desktop layout rempx(1000px) will trigger at the viewport width of 1500px. The scaling of the content and layout behave the same way as when we zoom in on the browser.

A huge benefit of writing all your units with the rempx() function is you can write pixel values from the designs and then it renders it as a rem value in the browser. This function is very easy to introduce to a project or include in the boilerplate of your future projects.

Wrapping up

This function can be written once and used everywhere.
We can take the pixel values from the design and generate a scalable rem value.
Our media query triggers relative to the root font size.
All our layout and content scales consistently.
No math necessary.
Better user experience across a wider range of user settings.
Better user existence overall.
Better developer existence overall.
This function improves our existence.

Further reading

There’s No Such Thing as a Desktop Screen Hajime Yamasaki Vukelic

Zoom, zoom, and zoom: the three types of browser (and CSS!) magnification, Miriam Suzanne

Convert pixel values to rem, Sass style, Bhargav Shah

Das obige ist der detaillierte Inhalt vonDie REM-zu-PX-Beziehung: So schreiben Sie besser zugängliche Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!