Cara menggunakannya
- Tetapkan saiz fon akar jika tapak anda mengubahnya (contohnya html { font-size: 62.5% } menjadikannya 10px).
- Taip nilai dalam mana-mana kotak untuk menukar px kepada rem atau rem kepada px. Tukar kepada em jika anda membuat saiz relatif kepada induk.
- Gunakan jadual untuk carian pantas, atau tampalkan coretan CSS untuk menukar setiap panjang px sekali gus dan salin hasilnya.
Cara ia berfungsi
rem = px ÷ saiz fon root. Dengan root lalai 16px, 24px ialah 1.5rem dan 14px ialah 0.875rem. em menggunakan formula yang sama tetapi dengan saiz fon elemen induk, sebab itu nilai em bersarang menjadi berganda; rem mengelakkan hal ini kerana ia sentiasa merujuk kepada root.
Menggunakan rem untuk saiz fon dan jarak membolehkan teks berskala apabila seseorang meningkatkan saiz fon lalai dalam tetapan penyemak imbas mereka, yang membantu orang yang mempunyai penglihatan terhad. Nilai dibundarkan kepada empat tempat perpuluhan.
Penukar coretan menukar nombor yang diikuti oleh px. Ia membiarkan komen, url(…) dan rentetan berpetik tidak diubah, mengekalkan 1px jika anda minta (sempadan nipis biasanya sepatutnya kekal 1px), menulis 0px sebagai 0, dan secara lalai membiarkan syarat @media dan @container tanpa diubah, kerana dalam pertanyaan media rem dan em sentiasa merujuk kepada saiz fon awal penyemak imbas, tanpa mengira saiz fon root yang anda tetapkan. Ia tidak memahami semantik calc() selain menggantikan nombor px di dalamnya, yang masih betul kerana setiap panjang ditukar secara berasingan.
Contoh
Saiz root lalai
Dengan root 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Teknik 62.5%
Jika CSS anda menetapkan html { font-size: 62.5% }, root ialah 10px, jadi 14px = 1.4rem dan 24px = 2.4rem. Tetapkan medan saiz fon root kepada 10 untuk sepadan.
Menukar komponen
padding: 24px 16px; border: 1px solid #ddd; menjadi padding: 1.5rem 1rem; border: 1px solid #ddd; dengan “Kekalkan nilai 1px” dihidupkan.
Soalan Lazim
Perlukah saya menggunakan rem atau em?
Gunakan rem untuk kebanyakan saiz fon, jarak dan susun atur kerana ia boleh diramal di mana-mana. Gunakan em apabila sesuatu patut berskala dengan saiz teks komponennya sendiri, seperti padding di dalam butang.
Mengapa tidak menukar pertanyaan media kepada rem?
Anda boleh, tetapi dalam pertanyaan media 1rem sentiasa sama dengan saiz fon lalai penyemak imbas (biasanya 16px), bukan font-size html anda. Oleh itu, penukar melangkaunya secara lalai; matikan pilihan itu jika anda membahagi dengan 16 juga.
Adakah rem lebih baik untuk kebolehcapaian daripada px?
Untuk saiz fon, ya: rem menghormati tetapan saiz fon lalai pengguna, manakala saiz fon px mengabaikannya. Zum penyemak imbas berfungsi dengan kedua-dua unit.
Privasi
Penukaran dan cebisan CSS diproses dalam pelayar anda dan tidak dihantar ke mana-mana.