REM 與 PX 關係：如何撰寫更容易存取的媒體查詢-css教學-PHP中文網

我們是開發人員。我們希望開發響應速度最快的佈局。我們希望適應不同的設備、解析度和用戶設定。我們希望在所有樣式表中使用一致的單位。我們希望盡可能少做數學運算。

我們什麼時候想要這個？現在！
我們需要知道什麼？很多東西！
我們該怎麼做呢？具有自訂 SASS 函數！

透過使用 SASS 函數，我們可以透過了解和考慮更多使用者的系統和瀏覽器層級設定來容納更多使用者。我將討論 rem 值與像素值的關係以及可能影響它們之間關係的因素。 1rem 幾乎總是以 16px 開始，但用戶可以透過多種方式更改它。我們稍後將編寫的這個 SASS 函數非常有用，因為它可以應用於更大的項目，並且可以逐步引入到您現有的項目中。

背景

促使我研究這個主題的是Hajime Yamasaki Vukelic 的文章《沒有桌面螢幕這樣的東西》，他對響應式設計的看法是「響應性不是一組簡單的任意螢幕寬度...回應能力與穩健性有關：在頁面開始崩潰之前，您可以拉伸或擠壓頁面多少」。 Hajime 談到他的父親如何以 400% 的正常速度瀏覽網頁。雖然這看起來像是一種邊緣情況，但了解使用者縮放顯示的不同方式以及我們正在編寫的樣式如何受到這些設定變更的影響非常重要。

縮放顯示

讓我們從盡可能小的開始，準確地理解像素是什麼。對於開發人員而言，有兩種類型的像素：裝置像素是給定螢幕上的光點數量，CSS 像素是測量單位。裝置像素通常不等於 CSS 像素。了解兩者之間的差異非常重要，這樣我們就可以確定哪些設定會影響每個值。

使用者可以像 Hajime 的父親一樣透過多種方式更改螢幕上內容的大小。使用者縮放顯示最常見的方法：

更改顯示解析度（系統設定）
放大瀏覽器標籤（在 Mac 上按 ⌘ 和 +，在 Windows 上按 Ctrl 和 +）
增加瀏覽器設定中的字體大小。

第一個和第二個選項，更改顯示解析度和縮放瀏覽器，本質上是做同樣的事情。這兩種方法都會縮放 CSS 像素，以便每個 CSS 像素佔用更多的裝置像素。在這種情況下，我們的佈局都會按比例縮放。 1rem 仍等於 16px，但每個 CSS 像素佔用更多裝置像素。要測試這一點，您可以放大瀏覽器選項卡，直到觸發「移動」佈局。此設定可以快速測試，通常不會造成太大問題。

更改瀏覽器字體大小將導致最大的變化。預設情況下，瀏覽器的設定為“medium”，在 Chrome 中意味著 1rem 為 16px。當使用者增加字體大小時，1rem 的值將增加，但其他值不會縮放。 1rem 將等於更多的 CSS 像素，因此會佔用更多的裝置像素。在 Chrome 上，將字體大小設為「非常大」時，1rem 將等於 24px。 CSS 像素的大小保持不變，只是根字體大小改變了。任何引用根字體大小的值都會受到影響。

The REM to PX relation: how to write more accessible media queries

在您的程式碼中，如果您混合使用像素和 rem 值，那麼您可能會開始遇到佈局問題，因為 rem 值會縮放，但像素值將保持不變。上圖顯示了一個簡單的範例，說明當文字設定為 rem 值，而最大寬度、列寬和填滿設定為像素值時，佈局會發生多麼劇烈的變化。響應式佈局應根據根字體大小進行相應縮放。

媒體查詢的問題

這通常是我們寫媒體查詢的方式：

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

登入後複製

由於我們試圖回應並適應所有用戶的設置，因此我們希望盡可能使用相對單位。讓我們在媒體查詢中使用 rem 值而不是像素：

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

登入後複製

使用預設瀏覽器設定，1000px 等於 62.5rem
1rem = 16px
1000px / 16px/rem = 62.5rem
這看起來就像每次我想寫一個相對單位時都必須做的數學運算。我們一開始就說過我們不想做數學。

我們都看過一個常見的修復方法，即 1rem = 10px。這通常是在設定項目的樣板檔案時完成的。您可以透過定位 html 選擇器來覆蓋根元素上的根字體大小：

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.