REM di CSS: Memahami dan Menggunakan Unit REM

Pemahaman mendalam tentang unit REM dalam CSS: unit yang agak besar dengan keserasian penyemak imbas yang sangat baik dan belajar cara menggunakannya dengan berkesan.

mata utama

1. Memahami unit REM: Belajar unit CSS REM, yang relatif kepada saiz fon unsur akar, menyediakan kaedah yang konsisten untuk saiz fon dan jarak dalam UI anda.
2. Bandingkan unit REM dan EM: meneroka perbezaan antara unit REM dan EM dalam CSS.
3. Aplikasi Praktikal dan Kebolehcapaian: Cari penggunaan praktikal unit REM dalam reka bentuk responsif, skala dokumen dan memastikan kebolehcapaian rangkaian, yang membolehkan pengguna menyesuaikan saiz fon mengikut keutamaan mereka.

Apakah unit REM?

Dalam CSS, REM bermaksud "Root EM", yang merupakan unit pengukuran yang mewakili saiz fon elemen akar. Ini bermakna 1REM adalah sama dengan saiz fon elemen HTML, dan untuk kebanyakan pelayar lalai adalah 16px. Menggunakan REM boleh membantu memastikan konsistensi dalam saiz fon dan jarak di seluruh UI.

Menurut spesifikasi W3C, definisi unit REM ialah:

sama dengan nilai yang dikira saiz font pada elemen akar. Apabila ditentukan pada sifat saiz fon elemen akar, unit REM merujuk kepada nilai awal harta tersebut.

unit rem dan unit em

Perbezaan antara unit REM dan unit EM ialah saiz fon unit EM berbanding dengan elemennya sendiri, bukan elemen akar. Oleh itu, mereka mungkin meleleh dan membawa kepada hasil yang tidak dijangka. Mari kita pertimbangkan contoh berikut, kami mahu senarai mempunyai saiz fon 12px, sekiranya saiz fon root adalah lalai 16px:

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

Jika kita mempunyai senarai yang bersarang dalam senarai lain, saiz fon senarai dalaman akan menjadi 75% daripada saiz induknya (9px dalam kes ini). Kita masih dapat mengatasi masalah ini dengan menggunakan sesuatu seperti:

<code>ul ul {font-size: 1em;}</code>

Ini berfungsi, tetapi kita masih perlu memberi perhatian yang besar kepada situasi bersarang yang lebih mendalam.

dengan unit REM, perkara lebih mudah:

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

Oleh kerana semua saiz merujuk kepada saiz fon akar, tidak lagi perlu untuk mengendalikan kes bersarang dalam perisytiharan berasingan.

Gunakan unit REM untuk saiz semula saiz fon

Salah satu perintis saiz saiz saiz fon menggunakan unit REM ialah Jonathan Snook, yang menerbitkan artikel mengenai saiz semula saiz fon menggunakan REM pada Mei 2011. Seperti banyak pemaju CSS yang lain, dia harus menghadapi masalah yang dibawa oleh unit EM dalam susun atur yang kompleks.

Pada masa itu, versi lama IE masih mempunyai bahagian pasaran yang besar, dan mereka tidak dapat skala teks menggunakan saiz piksel. Walau bagaimanapun, seperti yang kita lihat sebelum ini, mudah untuk mengabaikan bersarang dan mendapatkan hasil yang tidak dijangka menggunakan unit EM.

Masalah utama dengan menggunakan REM untuk saiz semula saiz fon adalah bahawa nilai -nilai ini tidak begitu mudah digunakan. Mari kita lihat contoh beberapa saiz fon biasa yang dinyatakan dalam unit REM, tentu saja, dengan mengandaikan saiz asas ialah 16px:

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 16px = 1rem (penanda aras)
• 18px = 1.125rem
• 20px = 1.25rem
• 24px = 1.5rem
• 30px = 1.875rem
• 32px = 2rem

Seperti yang dapat kita lihat, nilai -nilai ini tidak mudah untuk melakukan pengiraan. Jadi Snook menggunakan teknik yang dipanggil "62.5%. Ini bukan penemuan baru, kerana ia telah digunakan dalam unit EM:

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

Penyelesaian Snook menjadi:

Oleh kerana unit REM adalah relatif kepada elemen akar, penyelesaian Snook menjadi:

<code>ul ul {font-size: 1em;}</code>

kita juga harus mempertimbangkan penyemak imbas lain yang tidak menyokong REM. Jadi kod di atas sebenarnya ditulis seperti ini:

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

Walaupun penyelesaian ini nampaknya dekat dengan status "peraturan emas", sesetengah orang mengesyorkan untuk tidak menggunakannya secara membuta tuli. Harry Roberts menulis pendapatnya sendiri mengenai penggunaan unit REM. Pada pendapatnya, sementara penyelesaian 62.5% menjadikan pengiraan lebih mudah (kerana saiz fon dalam PX adalah 10 kali nilai REMnya), ia akhirnya memaksa pemaju untuk menulis semula semua saiz fon di laman web mereka.

Pandangan ketiga berasal dari Chris Coyier dari CSS-Tricks. Penyelesaiannya menggunakan ketiga -tiga unit yang kita hadapi sekarang. Dia mengekalkan saiz akar yang ditakrifkan dalam PX, modul yang ditakrifkan dalam unit REM, dan unsur -unsur dalam modul dalam unit EM. Pendekatan ini menjadikannya lebih mudah untuk memanipulasi saiz global, yang skala jenis dalam modul, manakala kandungan modul berskala berdasarkan saiz fon modul itu sendiri. Louis Lazaris kemudian membincangkan konsep ini dalam "Kuasa Unit EM dalam CSS".

Dalam contoh berikut, anda dapat melihat kaedah Chris seperti:

[Codepen Sample Link - Kod tertanam Codepen harus dimasukkan di sini, tetapi kerana saya tidak dapat mengakses laman web luaran, saya tidak dapat memberikannya. ]

Dalam amalan, rangka kerja utama seperti Bootstrap 4 dan Panduan Reka Bentuk Bahan Gunakan unit REM untuk mengubah saiz kandungan teks.

yang perlu disebutkan khususnya ialah Material-UI, yang merupakan koleksi komponen React yang sangat popular. Bukan sahaja mereka mengubah saiz teks dengan cara yang sama, mereka juga menyediakan mekanisme untuk mencapai "penyederhanaan 10px" yang kami sebutkan tadi.

Satu lagi projek baru -baru ini, setiap susun atur, menggabungkan unit EM dan REM dengan cara yang sangat kreatif. Ia paling dekat dengan gambaran keseluruhan model Chris Coyier dan menggunakan unit EM untuk menekankan unsur -unsur sebaris seperti ikon SVG, rentang, atau elemen lain yang serupa.

Seperti yang anda lihat, tidak ada penyelesaian "semua tujuan". Kombinasi yang mungkin hanya terhad oleh imaginasi pemaju.

Gunakan REMS

dalam titik break query media

Penggunaan unit EM atau REM dalam pertanyaan media berkait rapat dengan konsep "presiden terbaik" dan kesannya terhadap pengalaman membaca. Smashing Magazine menerbitkan artikel penyelidikan yang komprehensif mengenai penapisan web, bertajuk "Saiz penting: panjang garis seimbang dan saiz fon dalam reka bentuk web responsif." Di antara banyak perkara menarik lain, artikel itu memberikan anggaran panjang baris terbaik: antara 45 dan 75-85 aksara (termasuk ruang dan tanda baca), di mana 65 adalah nilai sasaran "ideal".

Menggunakan anggaran kasar 1REM = 1 aksara, kita dapat mengawal aliran teks kandungan lajur tunggal, menggunakan pendekatan pertama mudah alih:

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

Walau bagaimanapun, apabila digunakan sebagai unit dalam pertanyaan media, unit REM dan EM mempunyai perincian yang menarik: mereka sentiasa menyimpan nilai yang sama 1REM = 1EM = saiz fon yang ditetapkan oleh penyemak imbas. Sebab tingkah laku ini dijelaskan dalam spesifikasi pertanyaan media (diserlahkan):

Unit relatif dalam pertanyaan media adalah berdasarkan nilai awal, yang bermaksud bahawa unit tidak pernah berdasarkan hasil yang diisytiharkan. Sebagai contoh, dalam HTML, unit EM berbanding dengan nilai awal saiz font ditakrifkan oleh ejen pengguna atau keutamaan pengguna, dan bukannya gaya pada halaman.

mari kita lihat dengan cepat contoh tingkah laku ini:

[Codepen Sample Link - Kod tertanam Codepen harus dimasukkan di sini, tetapi kerana saya tidak dapat mengakses laman web luaran, saya tidak dapat memberikannya. ]

Pertama, di HTML kami mempunyai elemen di mana kami akan menulis lebar viewport:

<code>ul ul {font-size: 1em;}</code>

Seterusnya, kami mempunyai dua pertanyaan media, satu menggunakan unit REM dan yang lain menggunakan unit EM (ini menggunakan sass untuk kesederhanaan):

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

Akhirnya, kami menggunakan beberapa jQuery untuk memaparkan lebar viewport pada halaman dan mengemas kini nilai apabila saiz tetingkap berubah:

<code>body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */</code>

kita mulakan dengan trik 62.5% untuk menunjukkan bahawa saiz fon akar yang diubahsuai tidak mempunyai kesan pada nilai yang digunakan dalam pertanyaan media. Apabila kita menukar lebar tetingkap penyemak imbas, kita dapat melihat bahawa pertanyaan media pertama bermula pada 320px (20 × 16px) dan pertanyaan media kedua bermula pada 480px (30 × 16px). Perubahan saiz fon yang kami nyatakan tidak mempunyai kesan pada titik putus. Satu -satunya cara untuk menukar nilai Breakpoint Query Media adalah untuk mengubah saiz fon lalai dalam tetapan penyemak imbas.

Oleh itu, sebenarnya tidak ada perbezaan antara menggunakan unit EM atau REM dalam titik putus pertanyaan media. Yayasan Zurb (kini v6.5.3 pada masa penulisan) menggunakan unit EM dalam pertanyaan media.

Pengejaran aksesibiliti

kita telah melihat di atas bahawa keupayaan untuk skala berdasarkan saiz fon akar menjadikan unit REM sangat berguna untuk aksesibiliti. Pemaju Google mengesyorkan menggunakan unit relatif untuk saiz semula teks.

Kakitangan di belakang arkib Internet menjalankan kajian empirikal dan hasilnya menunjukkan bahawa sebilangan besar pengguna menukar saiz fon lalai dalam tetapan penyemak imbas mereka. Dengan menggunakan REM dan unit relatif lain, anda boleh menghormati keputusan pengguna tentang bagaimana mereka mahu melayari web.

dokumen skala menggunakan unit REM

Penggunaan ketiga yang kita dapati untuk unit REM adalah untuk membina komponen berskala. Dengan mewakili lebar, margin, dan padding dalam unit REM, anda boleh membuat antara muka yang tumbuh atau menyusut serentak dengan saiz fon akar. Mari lihat bagaimana perkara ini berfungsi menggunakan beberapa contoh.

[CODEPEN Contoh Pautan 1 - Kod tertanam CodePen harus dimasukkan di sini, tetapi kerana saya tidak dapat mengakses laman web luaran, saya tidak dapat memberikannya. ]

[CODEPEN Contoh Pautan 2 - Kod tertanam Codepen harus dimasukkan di sini, tetapi kerana saya tidak dapat mengakses laman web luaran, saya tidak dapat memberikannya. ]

Kesimpulan

Kami mengakhiri pertemuan kami dengan unit CSS REM di sini. Adalah jelas bahawa terdapat banyak kelebihan untuk menggunakan unit -unit ini dalam kod kami, seperti responsif, skalabilitas, pengalaman membaca yang lebih baik dan fleksibiliti definisi komponen yang lebih besar. Unit REM bukan penyelesaian sejagat sejagat, tetapi dengan penempatan yang teliti, mereka dapat menyelesaikan banyak masalah yang telah melanda pemaju selama bertahun -tahun. Ia bergantung kepada setiap kita untuk membuka kunci potensi REMS penuh. Lancarkan editor anda, menjalankan eksperimen, dan kongsi hasil anda dengan kami yang lain.

Untuk maklumat lanjut mengenai unit saiz CSS, lihat:

• memahami unit panjang dalam CSS
• unit saiz fon relatif CSS3 baru
• kuasa unit EM dalam CSS

Sudah tentu, REM bukan satu -satunya unit CSS yang tersedia. Semak gambaran keseluruhan unit saiz CSS kami.

Soalan Lazim Mengenai REM dalam CSS

Apakah perbezaan antara unit REM dan EM dalam CSS?

Perbezaan utama antara unit REM dan EM dalam CSS ialah mereka mengira titik rujukan saiz. Saiz fon unit EM berbanding dengan elemen induk terdekatnya. Jika anda bersarang elemen, setiap peringkat mungkin mempunyai saiz fon yang berbeza bergantung kepada saiz ibu bapanya, menghasilkan saiz kompaun. Sebaliknya, REM bermaksud "Root Em". Ia hanya relatif kepada elemen akar (HTML), yang menjadikannya konsisten digunakan di mana -mana sahaja dalam dokumen. Ini menjadikan unit REM lebih mudah untuk meramalkan dan mengurus dalam fail CSS yang besar.

Bagaimana untuk menukar piksel ke unit REM dalam CSS?

Untuk menukar piksel ke unit REM, anda perlu mengetahui saiz fon asas dokumen, biasanya 16px (saiz lalai untuk kebanyakan pelayar). Formula penukaran ialah: Nilai piksel/rujukan sasaran Saiz Font = Nilai REM. Sebagai contoh, jika anda mahukan saiz fon 24px, nilai bersamaan dalam REM ialah 24px/16px = 1.5rem.

Bolehkah saya menggunakan unit REM untuk sifat selain saiz fon?

Ya, unit REM boleh digunakan untuk sebarang atribut CSS yang memerlukan nilai panjang, bukan hanya saiz fon. Ini termasuk sifat seperti lebar, ketinggian, padding, margin dan ketinggian garis. Menggunakan unit REM untuk sifat -sifat ini dapat membantu mengekalkan jarak dan susun atur yang berkadar dengan saiz skrin yang berbeza.

Adakah semua penyemak imbas menyokong unit REM?

Ya, semua pelayar moden menyokong unit REM secara meluas, termasuk Chrome, Firefox, Safari, Edge, dan Internet Explorer 9 dan kemudian. Walau bagaimanapun, untuk penyemak imbas yang lebih tua yang tidak menyokong unit REM, anda boleh menyediakan pixel sandaran.

bagaimana menggunakan unit REM yang bermanfaat untuk reka bentuk responsif?

unit REM sangat bermanfaat untuk reka bentuk responsif. Oleh kerana REM adalah relatif kepada elemen akar, menukar saiz fon akar membolehkan anda mengubah saiz semua elemen yang ditakrifkan dalam REM. Ini boleh dilakukan dalam pertanyaan media, yang membolehkan saiz fon yang berbeza disediakan untuk saiz skrin yang berbeza, menjadikan reka bentuk anda responsif.

Apakah kesan menggunakan unit REM pada kebolehcapaian?

Menggunakan unit REM dapat meningkatkan kebolehcapaian laman web anda dengan ketara. Sesetengah pengguna boleh menyesuaikan saiz fon lalai penyemak imbas mereka untuk kebolehbacaan yang lebih besar. Kerana unit REM adalah relatif kepada saiz fon penanda aras ini, ia membolehkan susun atur dan jarak laman web anda untuk menyesuaikan mengikut keutamaan pengguna, meningkatkan pengalaman pengguna keseluruhan.

Bagaimana untuk mengatasi gaya yang ditakrifkan dalam unit REM?

anda boleh mengatasi gaya yang ditakrifkan dalam unit REM dengan menggunakan kekhususan CSS atau! Peraturan penting. Walau bagaimanapun, adalah disyorkan untuk menggunakan kaedah ini dengan berhati -hati dan sebaliknya membina CSS anda dengan cara yang meminimumkan keperluan untuk liputan.

Bolehkah saya menggunakan unit REM dalam kombinasi dengan unit lain seperti piksel atau peratusan?

Ya, unit REM boleh digunakan dalam kombinasi dengan unit lain seperti piksel atau peratusan. Ini boleh memberikan fleksibiliti yang lebih besar untuk reka bentuk anda. Sebagai contoh, anda boleh menggunakan piksel untuk lebar sempadan (tidak perlu skala dengan saiz teks) dan unit REM untuk mengisi (diperlukan).

Bagaimana untuk menetapkan saiz fon asas unit REM?

Saiz fon asas unit REM ditetapkan menggunakan sifat saiz font pada elemen root (HTML). Sebagai contoh, jika anda mahu saiz fon penanda aras menjadi 10px, anda boleh menggunakan: html {font-size: 10px; Semua unit REM akan menjadi relatif kepada saiz ini.

Apakah amalan terbaik untuk menggunakan unit REM dalam CSS?

Beberapa amalan terbaik untuk menggunakan unit REM dalam CSS termasuk: menetapkan saiz fon asas yang munasabah pada elemen akar; Saiz fon yang berbeza untuk memastikan ia tetap boleh diakses dan seimbang secara visual.

Atas ialah kandungan terperinci REM di CSS: Memahami dan Menggunakan Unit REM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!