Atoz CSS Tip Pantas: Manfaat REM dan EM Nilai

mata utama

Menggunakan unit relatif seperti "em" untuk menetapkan saiz teks dan ruang dalaman dan luaran unsur -unsur lebih fleksibel daripada menggunakan piksel, terutama dalam projek responsif. Walau bagaimanapun, unit "em" boleh menyebabkan masalah dengan unsur -unsur bersarang, menyebabkan mereka berkembang atau mengecut secara eksponen pada setiap tahap bersarang.
unit "REM" adalah alternatif yang lebih dipercayai untuk menetapkan saiz fon, kerana ia sentiasa dikira berdasarkan saiz fon elemen akar. Ini mengelakkan pertumbuhan eksponen atau pengecutan yang berlaku apabila menggunakan unit "em" dalam elemen bersarang.
Untuk sokongan penyemak imbas, terutamanya untuk versi lama Internet Explorer, anda boleh menggunakan alternatif JS Polyfill atau PX. Jika menggunakan SASS, anda boleh membuat makro dan fungsi hibrid untuk mengira saiz REM yang diperlukan dan secara automatik menyediakan pelan sandaran.

Artikel ini adalah sebahagian daripada siri Atoz CSS kami. Anda boleh mencari entri lain untuk siri ini di sini. Anda boleh melihat teks penuh dan tangkapan skrin video yang sepadan (video mengenai

kelas pseudo) di sini. :required

Selamat datang ke siri Atoz CSS kami! Dalam siri ini, saya akan meneroka nilai CSS yang berbeza (dan sifat), masing -masing bermula dengan huruf yang berbeza dalam abjad. Kami tahu bahawa kadang -kadang tangkapan skrin tidak mencukupi, jadi dalam artikel ini kami telah menambah beberapa petua cepat menggunakan nilai REM dan EM.

R bermaksud REM dan Em

Dalam video tangkapan skrin awal, kami belajar tentang kelas pseudo

, yang boleh digunakan untuk bentuk gaya di mana bidang mesti diisi. :required

Borang, pengesahan, dan status gaya adalah topik penting, tetapi kami tidak terlepas banyak ketika kami pertama kali membincangkan

. Oleh itu mari kita lihat beberapa petua cepat untuk menggunakan unit pengukuran REM. Tetapi pertama, mari kita lihat unit relatif lain: em. :required

kebaikan dan keburukan menggunakan

Apabila bekerja dengan item responsif, menggunakan unit relatif seperti EM untuk menetapkan saiz teks dan jarak dalaman dan luaran elemen lebih fleksibel daripada menggunakan piksel. Ini kerana unit ini membolehkan saiz, jarak, dan kandungan teks elemen berkembang secara proporsional dengan saiz fon elemen induk berbanding dengan saiz fon elemen induknya.

Gunakan unit relatif ini, anda boleh membina sistem skala di mana menukar nilai saiz fon elemen mempunyai kesan cascading pada unsur -unsur kanak -kanak di dalamnya. Sistem berkadar adalah perkara yang baik, tetapi tingkah laku EM ini mempunyai kelemahan.

Pertimbangkan coretan kod HTML berikut:

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

Senarai bersarang ini bukanlah perkara yang paling biasa di dunia, tetapi ia mungkin muncul dari halaman dan syarat halaman atau jenis dokumen rasmi yang lain.

Jika kita mahu item senarai menonjol, kita boleh menetapkan saiz fonnya kepada 1.5 kali saiz penanda aras 16px.

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

tetapi ini menyebabkan masalah dengan lis bersarang, kerana mereka juga akan menjadi 1.5 kali saiz unsur induk mereka. Item bersarang akan menjadi 1.5 kali lebih tinggi daripada 24px, bukannya 1.5 kali lebih tinggi daripada 16px. Hasilnya ialah mana -mana item senarai bersarang akan berkembang dengan pesat pada setiap tahap bersarang. Ini mungkin bukan hasil pereka yang mahu!

Masalah yang sama juga berlaku apabila elemen bersarang dan nilai EM kurang daripada 1. Dalam kes ini, mana -mana item bersarang akan terus berkurangan pada setiap tahap bersarang.

Jadi apa yang harus kita lakukan?

Gunakan REM untuk menetapkan saiz teks

Untuk mengelakkan saiz fon yang semakin meningkat atau berkurangan, kita boleh menggunakan unit alternatif.

kita boleh menggunakan piksel, tetapi seperti yang dinyatakan sebelum ini, unit relatif lebih fleksibel dalam projek responsif. Sebaliknya, kita boleh menggunakan unit REM kerana ini sentiasa berdasarkan saiz fon elemen akar, yang dalam hal laman web atau aplikasi web biasanya merupakan elemen HTML. Dalam dokumen .svg atau .xml, unsur -unsur akar mungkin berbeza, tetapi jenis dokumen ini berada di luar skop semasa kami.

Jika kita menggunakan REM untuk menetapkan saiz fon, itu tidak bermakna bahawa EM tidak akan digunakan. Saya cenderung menggunakan EM untuk menetapkan padding di dalam elemen supaya jarak sentiasa relatif kepada saiz teks.

Gunakan sass untuk membantu sokongan penyemak imbas REM

unit REM hanya disokong dari IE9 dan kemudian. Jika anda memerlukan sokongan untuk IE8 (atau lebih awal), anda boleh menggunakan JS Polyfill atau menyediakan alternatif PX seperti berikut:

li {
  font-size: 1.5em; /* 24px/16px */
}

Jika anda menggunakan SASS, anda boleh membuat makro hibrid dan fungsi untuk mengira saiz REM yang diperlukan dan secara automatik menyediakan penyelesaian alternatif.

li {
  font-size: 24px;
  font-size: 1.5rem;
}

itu sahaja. Beberapa petua cepat menggunakan REM. Jika anda tidak menggunakannya dalam projek semasa anda, saya sangat mengesyorkan anda mencubanya.

FAQ untuk nilai REM dan EM dalam CSS

Apakah perbezaan utama antara REM dan EM dalam CSS?

Perbezaan utama antara REM dan EM dalam CSS ialah mereka mengira titik rujukan saiz. Em saiz fon relatif terhadap elemen induk atau elemen semasa yang terdekat. Ini bermakna jika anda bersarang elemen, masing -masing menggunakan EM untuk menentukan saiz fon, saiznya akan dikompaun dan dengan cepat boleh menjadi sukar untuk dikawal. Sebaliknya, REM adalah relatif kepada elemen akar (atau elemen HTML). Ini bermakna tidak kira seberapa jauh elemen bersarang, jika anda menentukan saiz fonnya menggunakan REM, ia akan merujuk saiz fon elemen HTML, memberikan saiz yang konsisten di laman web anda.

Bilakah saya harus menggunakan REM dan bukannya EM dalam CSS?

REM biasanya digunakan apabila anda ingin membuat saiz semula yang konsisten dan boleh diramal di seluruh laman web anda. Kerana REM adalah relatif kepada elemen akar, saiz semula akan tetap konsisten tidak kira sejauh mana elemen anda bersarang. Ini amat berguna untuk membina reka bentuk responsif di mana konsistensi dan ramalan adalah kritikal. Walau bagaimanapun, apabila anda ingin membuat reka bentuk yang lebih dinamik dan berskala, anda boleh menggunakan EM di mana saiz elemen adalah relatif kepada ibu bapanya.

Bagaimana untuk menukar piksel ke REM atau EM dalam CSS?

Untuk menukar piksel ke REM atau EM, anda perlu mengetahui saiz fon rujukan dokumen. Ini biasanya ditetapkan pada elemen HTML, biasanya 16px, tetapi boleh menjadi nilai. Sebaik sahaja saiz fon rujukan diketahui, nilai REM atau EM boleh dikira dengan membahagikan nilai piksel yang dikehendaki oleh saiz fon rujukan. Sebagai contoh, jika saiz fon penanda aras anda adalah 16px, dan anda mahu saiz fon 24px, pengiraan adalah 24/16 = 1.5rem atau 1.5EM.

Bolehkah unit REM dan EM digunakan secara bergantian?

Walaupun kedua -dua unit REM dan EM boleh digunakan untuk menentukan saiz dalam CSS, mereka tidak boleh digunakan secara bergantian kerana titik rujukannya yang berbeza. REM sentiasa relatif kepada elemen akar, manakala EM adalah relatif kepada elemen induk terdekat atau elemen semasa. Ini bermakna nilai REM atau EM yang sama boleh menghasilkan saiz yang berbeza bergantung kepada konteks yang digunakan.

Bagaimana keserasian penyemak imbas mempengaruhi penggunaan unit REM dan EM?

unit REM dan EM disokong dengan baik dalam semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, jika anda perlu menyokong versi lama Internet Explorer (iaitu 8 atau lebih awal), anda harus sedar bahawa pelayar ini tidak menyokong unit REM. Dalam kes ini, anda mungkin perlu menggunakan pelan sandaran piksel atau mempertimbangkan menggunakan unit EM, yang mempunyai sokongan penyemak imbas yang lebih luas.

Bagaimana unit REM dan EM mempengaruhi kebolehcapaian?

unit rem dan em dapat meningkatkan kebolehcapaian laman web anda dengan memudahkan skala dan bertindak balas terhadap tetapan pengguna. Oleh kerana unit -unit ini adalah relatif, mereka membenarkan pengguna menyesuaikan saiz fon asas mengikut keutamaan mereka tanpa melanggar susun atur. Ini amat bermanfaat untuk pengguna cacat penglihatan yang mungkin perlu meningkatkan saiz fon untuk kebolehbacaan yang lebih besar.

Apakah amalan terbaik untuk menggunakan unit REM dan EM?

Amalan terbaik adalah menggunakan unit REM untuk menentukan saiz fon, margin, dan padding untuk memastikan konsistensi di seluruh laman web. Anda boleh menggunakan unit EM untuk unsur-unsur yang perlu diperkuat dengan elemen induk mereka, seperti menu drop-down atau tooltips. Ia juga merupakan idea yang baik untuk menentukan saiz fon penanda aras sebagai peratusan pada elemen HTML, yang membolehkan pengguna menyesuaikan saiz fon penanda aras mengikut keutamaan mereka.

Bagaimana unit REM dan EM berfungsi dengan pertanyaan media?

unit rem dan em boleh digunakan dalam pertanyaan media seperti mana -mana unit lain. Walau bagaimanapun, kerana unit -unit ini adalah relatif, mereka boleh membuat pertanyaan media anda lebih fleksibel dan responsif. Sebagai contoh, jika anda menentukan titik putus menggunakan unit EM, mereka akan skala dengan saiz fon asas, yang membolehkan susun atur anda menyesuaikan diri dengan tetapan pengguna.

Bolehkah saya menggunakan unit REM dan EM untuk elemen selain teks?

Ya, unit REM dan EM boleh digunakan untuk sebarang definisi saiz dalam CSS, bukan hanya teks. Ini termasuk lebar, ketinggian, mengisi, margin, lebar sempadan, dan juga kedudukan. Menggunakan unit REM dan EM untuk sifat -sifat ini boleh menjadikan susun atur anda lebih fleksibel dan responsif.

Bagaimana menangani unsur bersarang semasa menggunakan unit EM?

Elemen bersarang boleh menjadi cabaran apabila menggunakan unit EM kerana saiznya akan dikompaun. Salah satu cara untuk menangani ini adalah untuk menetapkan semula saiz fon elemen bersarang kepada 1EM, yang akan menjadikannya sama dengan saiz fon elemen induknya. Sebagai alternatif, anda boleh menggunakan unit REM untuk elemen bersarang untuk memastikan konsistensi dalam saiz semula.

Atas ialah kandungan terperinci Atoz CSS Tip Pantas: Manfaat REM dan EM Nilai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!