Cara Mengukur Perbandingan PX dan REM pada CSS Template Blogger

Suatu ketika, di saat sedang memandangi betapa cantiknya blog ini, saya baru menyadari kalau judul artikelnya terlalu besar. Saya cek dengan cara inspect element pada Google Chrome, kira-kira begini hasilnya:

h1.post-title {
   font-size: 25px;
   font-size: 1.575rem;
   margin: 0 0 20px;
   margin: 0 0 1.25rem;
   font-family: arial, sans-serif;
}

Dalam dunia desain web, saya kurang tahu pasti mengapa keduanya dimasukkan di dalam satu bungkus element, antara pixel (px) dan root em (rem).

"Padahal cukup dengan menggunakan kode pixel (px) tanpa harus menyertakan root em (rem) di dalamnya," pikir pendek saya.

Dulu ketika iseng membuat template blogger, saya tidak pernah menggunakan kode root em (rem) untuk menyatakan ukuran pada kecil dan besarnya teks pada judul serta isi postingan blog. Semuanya dinyatakan oleh pixel (px).

Pada akhirnya, setelah saya pelajari lebih lanjut, ternyata penggunaan root em (rem) akan sangat berguna untuk elemen-elemen yang krusial seperti padding, margin, dan font-size. Di sisi lain, ada pengecualian untuk pemakaian kode border misalnya, tidak mungkin ditulis seperti border: 0.0625rem solid white karena nilainya yang terlalu kecil.

Cara Mengukur Perbandingan PX dan REM pada CSS Template Blogger

Pada kode CSS, tepatnya ketika kalian sedang memodifikasi template blogger, apabila menemukan kode pixel (px) dan root em (rem) secara bersamaan di dalam satu bungkus element dan ingin disesuaikan, silakan gunakan tabel di bawah ini.

Pixels ke REM 1px 0.06rem 2px 0.13rem 3px 0.19rem 4px 0.3rem 5px 0.3rem 6px 0.4rem 8px 0.5rem 10px 0.6rem 12px 0.8rem 14px 0.9rem 15px 0.9rem 16px 1rem 18px 1.1rem 20px 1.3rem 24px 1.5rem 25px 1.6rem 28px 1.8rem 32px 2rem 36px 2rem 40px 3rem 44px 3rem 48px 3rem 50px 3rem 56px 4rem 64px 4rem 72px 5rem 75px 5rem 80px 5rem 90px 6rem 10px 6rem

REM ke Pixels 0.01rem 0.16px 0.03rem 0.5px 0.05rem 0.8px 0.08rem 1.3px 0.1rem 1.6px 0.15rem 2px 0.2rem 3px 0.5rem 8px 1rem 16px 2rem 32px 3rem 48px 4rem 64px 6rem 96px 8rem 128px 10rem 160px 15rem 240px 20rem 320px 30rem 480px 40rem 640px 50rem 800px 60rem 960px 80rem 1280px 100rem 1600px

Contoh kasusnya seperti ini. Anggaplah ukuran teks di angka 25px, maka untuk root em (rem) angkanya ialah 1.6rem.

Referensi:
https://nekocalc.com/px-to-rem-converter
https://www.codepolitan.com/blog/menjelajahi-ukuran-dalam-css-px-em-rem-dan-vh-untuk-desain-web-yang-responsif/
https://rifatnajmi.com/design/px-em-rem/
https://theodorusclarence.com/blog/id-btb-rem-em

Labels: Blogger,

Kalian baru saja membaca artikel Cara Mengukur Perbandingan PX dan REM pada CSS Template Blogger. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.