REM と PX の関係: よりアクセスしやすいメディア クエリを作成する方法

私たちは開発者です。私たちは最も応答性の高いレイアウトを開発したいと考えています。さまざまなデバイス、解像度、ユーザー設定に対応したいと考えています。すべてのスタイルシートで一貫した単位を使用したいと考えています。計算はできるだけ少なくしたいと考えています。

これはいつ必要ですか?今すぐ!
何を知るべきでしょうか?たくさんのものがたくさんあります！
どうやってこれを行うのでしょうか？カスタムSASS機能搭載!

SASS 機能を使用することで、システムおよびブラウザーレベルの設定を理解し、説明することで、より多くのユーザーに対応できます。 rem 値がピクセル値にどのように関係するのか、またそれらの関係に何が影響するのかについて説明します。 1rem はほとんどの場合 16px から始まりますが、ユーザーがそれを変更できる方法があります。この後で作成する SASS 関数は、大規模なプロジェクトに適用でき、既存のプロジェクトに段階的に導入できるため、非常に役立ちます。

背景

私がこのトピックについて調べるきっかけとなったのは、山崎一 Vukelic 氏による「デスクトップ画面などというものはない」という記事で、レスポンシブ デザインに対する彼の見解は次のとおりです。「レスポンシブ性とは、任意の画面幅の単純なセットに関するものではありません...」応答性は堅牢性に関するものです。ページが崩れ始める前に、どれだけページを伸ばしたり絞ったりできるかです。」ハジメは、父親がほぼ 400% の割合で Web を閲覧していることについて話します。これは特殊なケースのように思えるかもしれませんが、ユーザーが表示を拡大縮小するさまざまな方法と、作成中のスタイルが設定の変更によってどのような影響を受けるかを知ることが重要です。

スケール表示

ピクセルとは何かを正確に理解することから、できるだけ小さなことから始めましょう。開発者に関する限り、ピクセルには 2 種類あります。1 つは特定の画面上の光のドットの量であるデバイス ピクセルで、もう 1 つは測定単位である CSS ピクセルです。通常、デバイスのピクセルは CSS ピクセルと等しくありません。どの設定が各値に影響するかを把握できるように、2 つの違いを理解することが重要です。

ハジメの父親のように、ユーザーが画面上のコンテンツのサイズを変更できる方法はいくつかあります。ユーザーが表示を拡大縮小する最も一般的な方法:

• ディスプレイ解像度の変更 (システム設定)
• ブラウザタブを拡大します (Mac では ⌘ と +、Windows では Ctrl と + を押します)
• ブラウザの設定でフォント サイズを大きくします。

最初と 2 番目のオプション (ディスプレイ解像度の変更とブラウザーでのズーム) は、基本的に同じことを行います。どちらの方法でも、各 CSS ピクセルがより多くのデバイス ピクセルを占めるように CSS ピクセルをスケーリングします。この場合、レイアウトはすべて比例して拡大縮小されます。 1rem は 16px に等しくなりますが、各 CSS ピクセルはより多くのデバイス ピクセルを占有します。これをテストするには、「モバイル」レイアウトがトリガーされるまでブラウザーのタブを拡大します。この設定はすぐにテストでき、通常は大きな問題は発生しません。

ブラウザのフォント サイズを変更すると、最も大きな変化が生じます。デフォルトでは、ブラウザの設定は「中」です。これは、Chrome では 1rem が 16 ピクセルを意味します。ユーザーがフォント サイズを大きくすると、1rem の値は増加しますが、他の値は拡大縮小されません。 1rem はより多くの CSS ピクセルに等しいため、より多くのデバイス ピクセルを占有します。 Chrome では、フォント サイズを「非常に大きい」に設定すると、1rem は 24px に相当します。 CSS ピクセルのサイズは変わりません。変更されたのはルート フォント サイズです。ルート フォント サイズを参照する値はすべて影響を受けます。

コード内でピクセル値とレム値が混在している場合、レム値は拡大縮小されますがピクセル値は変わらないため、レイアウトの問題が発生する可能性があります。上の画像は、テキストを rem 値で設定し、最大幅、列幅、パディングをピクセル値で設定した場合に、レイアウトがどれほど大きく変化するかを示す簡単な例を示しています。レスポンシブ レイアウトは、ルート フォント サイズに応じて拡大/縮小する必要があります。

メディアクエリの問題

メディア クエリの一般的な記述方法は次のとおりです。

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

私たちはすべてのユーザーの設定に応答して適応できるように努めているため、可能な限りすべての場所で相対単位を使用したいと考えています。メディアクエリでピクセルの代わりにレム値を使用しましょう:

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

デフォルトのブラウザ設定では、1000px は 62.5rem に相当します
1レム = 16ピクセル
1000ピクセル / 16ピクセル/レム = 62.5レム
これは、相対単位を書きたいときに毎回やらなければならない数学のように思えます。私たちは最初に、数学はやりたくないと言いました。

誰もが見たことがある、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.

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

以上がREM と PX の関係: よりアクセスしやすいメディア クエリを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。