Hubungan REM dengan PX: cara menulis pertanyaan media yang lebih mudah diakses

Kami adalah pembangun. Kami mahu membangunkan reka letak yang paling responsif. Kami mahu menampung peranti, resolusi dan tetapan pengguna yang berbeza. Kami mahu menggunakan unit yang konsisten merentas semua helaian gaya. Kami mahu melakukan sedikit matematik yang mungkin.

Bilakah kita mahu ini? SEKARANG!
Apa yang kita perlu tahu? Banyak barang!
Bagaimana kita melakukan ini? Dengan fungsi SASS tersuai!

Dengan menggunakan fungsi SASS, kami boleh menampung lebih ramai pengguna dengan memahami dan mengambil kira tetapan peringkat sistem dan pelayar mereka. Saya akan membincangkan bagaimana nilai rem berkaitan dengan nilai piksel dan perkara yang mungkin menjejaskan hubungan antara mereka. 1rem hampir selalu bermula sebagai 16px tetapi terdapat cara pengguna boleh mengubahnya. Fungsi SASS yang akan kami tulis nanti sangat membantu kerana ia boleh digunakan pada projek yang lebih besar dan ia boleh diperkenalkan secara berperingkat ke dalam projek sedia ada anda.

Latar belakang

Apa yang membuatkan saya melihat topik ini ialah artikel There's No Such Thing as a Desktop Screen, Hajime Yamasaki Vukelic, di mana pandangan beliau mengenai reka bentuk responsif ialah "tindak balas bukan tentang set mudah lebar skrin sewenang-wenangnya.... responsif adalah mengenai keteguhan: berapa banyak anda boleh meregangkan atau memerah halaman sebelum ia mula runtuh”. Hajime bercakap tentang cara bapanya menyemak imbas web pada asasnya 400% skala biasa. Walaupun ini mungkin kelihatan seperti sarung tepi, adalah penting untuk mengetahui cara berbeza pengguna boleh menskalakan paparan mereka dan cara gaya yang kami tulis dipengaruhi oleh perubahan dalam tetapan ini.

Paparan berskala

Mari kita mulakan sekecil mungkin dengan memahami dengan tepat apa itu piksel. Setakat pembangun, terdapat dua jenis piksel: terdapat piksel peranti yang merupakan jumlah titik cahaya pada skrin tertentu dan terdapat piksel CSS yang merupakan unit ukuran. Piksel peranti biasanya tidak sama dengan piksel CSS. Adalah penting untuk memahami perbezaan antara kedua-duanya supaya kita boleh memikirkan tetapan yang mempengaruhi setiap nilai.

Terdapat beberapa cara pengguna boleh menukar saiz kandungan pada skrin mereka seperti bapa Hajime. Cara paling biasa pengguna boleh menskalakan paparan mereka:

• menukar resolusi paparan (tetapan sistem)
• zum masuk pada tab penyemak imbas (pada Mac menekan ⌘ dan +, tetingkap Ctrl dan +)
• meningkatkan saiz fon dalam tetapan penyemak imbas.

Pilihan pertama dan kedua, menukar resolusi paparan dan zum dalam penyemak imbas, pada asasnya melakukan perkara yang sama. Kedua-dua kaedah akan menskalakan piksel CSS supaya setiap piksel CSS mengambil lebih banyak piksel peranti. Dalam kes ini, susun atur kami semua skala secara berkadar. 1rem masih akan sama dengan 16px tetapi setiap piksel CSS menggunakan lebih banyak piksel peranti. Untuk menguji ini, anda boleh mengezum masuk pada tab penyemak imbas sehingga anda mencetuskan reka letak "mudah alih". Tetapan ini pantas diuji dan secara amnya tidak boleh menyebabkan banyak isu.

Menukar saiz fon penyemak imbas akan menyebabkan perubahan yang paling banyak. Secara lalai, tetapan penyemak imbas ialah "sederhana" yang dalam Chrome bermaksud 1rem ialah 16px. Apabila pengguna meningkatkan saiz fon, nilai 1rem akan meningkat tetapi tiada nilai lain akan berskala. 1rem akan menyamai lebih banyak piksel CSS dan oleh itu mengambil lebih banyak piksel peranti. Pada Chrome, dengan saiz fon ditetapkan kepada "sangat besar", 1rem akan sama dengan 24px. Saiz piksel CSS kekal sama, ia adalah saiz fon akar yang telah berubah. Sebarang nilai yang merujuk kepada saiz fon akar akan terjejas.

Dalam kod anda, Jika anda mempunyai gabungan nilai piksel dan rem maka anda mungkin mula menghadapi isu reka letak kerana nilai rem akan berskala tetapi nilai piksel akan kekal sama. Imej di atas menunjukkan cara contoh mudah bagaimana reka letak secara drastik boleh berubah apabila teks ditetapkan dalam nilai rem manakala lebar maks, lebar lajur dan pelapik ditetapkan dengan nilai piksel. Reka letak responsif harus berskala sewajarnya dengan saiz fon akar.

Masalah dengan pertanyaan media

Ini secara amnya cara kami menulis pertanyaan media:

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

Memandangkan kami cuba responsif dan boleh menyesuaikan diri dengan semua tetapan pengguna, kami mahu menggunakan unit relatif di mana-mana sahaja yang kami boleh. Mari gunakan nilai rem dan bukannya piksel dalam pertanyaan media:

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

Dengan tetapan penyemak imbas lalai, 1000px akan bersamaan dengan 62.5rem
1rem = 16px
1000px / 16px/rem = 62.5rem
Itu kelihatan seperti matematik yang perlu saya lakukan setiap kali saya ingin menulis unit relatif. Kami berkata pada mulanya bahawa kami tidak mahu perlu membuat matematik.

Terdapat pembetulan biasa yang kita semua lihat di mana kita membuat 1rem = 10px. Ini biasanya dilakukan semasa menyediakan boilerplate projek. Anda menulis ganti saiz fon akar pada elemen akar dengan menyasarkan pemilih 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

Atas ialah kandungan terperinci Hubungan REM dengan PX: cara menulis pertanyaan media yang lebih mudah diakses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!