Perbedaan REM dan EM pada satuan website

Bingung Tentang REM dan EM? 

REM dapat membingungkan, terutama tanpa pemahaman yang kuat tentang mitranya EM dan archvillain mereka, PX. 

Unit relatif 
Kedua rem dan em adalah unit relatif, px tidak. Sebelum mempertimbangkan rem, penting untuk memahami hubungan antara em, markup dan warisan. 

Di bawah ini, contoh menunjukkan bagaimana setiap anak bersarang mengasumsikan orangtua adalah 1em (100%). Dengan demikian anak-anak mewarisi ukuran dengan skala dalam kaitannya dengan ukuran font induk.

Sementara nilai tetap 0.773em, ukuran font yang sebenarnya dihitung pada 77,3% dari induk langsung, yang pada gilirannya skala dari induknya. Hal ini berlanjut hingga pohon DOM setiap kali orang tua memiliki font-ukuran yang ditetapkan. 

Dalam contoh ini, beberapa elemen, masing-masing dengan ukuran font, bersarang untuk efek visual. Anda dapat melihat itu bukan praktik yang baik, karena warisan senyawa menciptakan hasil yang tidak diinginkan. Namun, Anda tidak perlu khawatir tentang hal ini jika CSS dan markup yang modular untuk memulai. 

Save Lives dengan EM 

Yah, mungkin tidak hidup, tetapi akan menghemat baris ... kode. Contoh berikut melakukan hal yang sama, ukuran font dan pembaruan bantalan dalam permintaan media yang. Nilai awal dihitung dengan incrementing 1em (16px) pada rasio 1:1.2. Anda dapat memilih rasio / skala yang berbeda dan menghitung nilai-nilai Anda sendiri pada Type

Hanya ada satu nilai em menimpa di query media, karena em mewarisi dan skala relatif terhadap induknya (html dalam kasus ini) ukuran font, mirip dengan cara jalur vektor skala proporsional. 

Kode ini hampir dua kali lipat saat memperbarui px, karena setiap nilai harus dihitung ulang dan didefinisikan dalam query Media. 

REM seperti di Akar EM 

Sementara em adalah relatif terhadap ukuran font dari orang tua langsung maupun terdekatnya, rem hanya relatif terhadap html (root) font-size. Saya suka berpikir itu sebagai reset. Jika sebuah style sheet dibangun secara modular, maka rem seharusnya tidak diperlukan sangat sering, tetapi dapat berguna di kali. 

Misalnya, jika Anda mencoba untuk mencapai jarak yang konsisten tanpa markup tambahan, rem dapat digunakan untuk menentukan padding dan margin.

PX dapat digunakan untuk padding dan margin yang konsisten juga, tapi tidak skala seluruh pertanyaan media seperti em dan rem. 

kesimpulan 

Saya menggunakan em selama hampir segalanya, rem sesekali untuk padding atau margin, tetapi hanya dalam keadaan darurat, dan px beberapa kali untuk perbatasan. 

Untuk sebagian besar, saya ingin anak-anak untuk mewarisi ukuran. Jika sidebar akan menjadi ukuran font yang lebih kecil, maka saya berharap semua anak untuk mengubah ukuran proporsional tanpa harus menghitung dan mendefinisikan kembali penyeleksi individu. 

Saya berjuang untuk memikirkan alasan yang baik untuk menggunakan rem untuk nilai font-size, tapi aku yakin ada pengecualian. Jika saya mencoba untuk me-reset ukuran font dengan rem, itu mungkin tanda CSS saya tidak sangat modular dan karena untuk refactor