em VS rem di CSS

Tujuan utama CSS adalah memberi browser kemampuan untuk mendesain komponen HTML. Untuk mencapai hal ini, CSS memberikan nilai tertentu untuk berbagai atribut, termasuk warna latar belakang, ukuran font, margin, dan padding, antara lain.

Di CSS, unit scalable em dan rem keduanya memberikan nilai atribut. Skala em dan rem lebih baik daripada px dan sesuai dengan persyaratan aksesibilitas web. Oleh karena itu mereka lebih cocok untuk desain responsif.

Satuan panjang relatif em dan rem akan dibahas dalam artikel ini. Selain itu, kita akan membahas contoh kode untuk mengilustrasikan cara pengoperasiannya, perbedaannya, dan pola pengkodeannya. Akhirnya, kita akan menemukan masalah apa yang diselesaikan masing-masing dan kapan menggunakannya.

Informasi latar belakang

Seperti yang telah kita bahas sebelumnya, sintaks CSS cukup mendasar dan terdiri dari pemberian nilai properti elemen HTML. Sebagai deklarasi CSS, pasangan properti-nilai dirujuk.

Perhatikan kode di bawah ini:

h1 {
  color: black;
  background-color: rgb(190,43,111,0.5);
  font-weight: 800;
  font-size: 1.5rem;
  padding: 4em;
  margin: 10px;
  weight: 100%;
  height: 100vh;
}

Kode ini menunjukkan deklarasi CSS yang menata elemen h1 halaman web dengan memberikan nilai tertentu ke beberapa properti elemen. Kita dapat melihat bahwa beberapa karakteristik memiliki nilai numerik yang diberikan padanya, seperti ukuran font, padding, dan margin.

Ada berbagai bentuk nilai numerik dalam CSS:

• Bilangan bulat, seperti 800 yang ditetapkan ke properti font-weight di atas, dianggap bilangan bulat.
• Nilai, seperti nilai alfa yang diberikan ke ekspresi fungsi rgb() di atas, adalah angka desimal. Opacity adalah 50% karena nilai alpha 0,5.
• persentase: atribut bobot diberi nilai 100%.
• Kuantitas yang menyertakan unit, seperti 1,5 rem, 10 piksel, atau 100 vh. Panjang, sudut, waktu, dan resolusi adalah kategori dimensi yang berbeda. Masing-masing dimensi dalam contoh di atas (em, px, rem, dan vh) termasuk dalam kategori panjang.

Nilai panjang

Berat, tinggi, margin, padding, dan ukuran font adalah beberapa atribut CSS yang memiliki nilai panjang yang ditetapkan sebagai tipe data CSS. Nilai untuk panjang mungkin mutlak atau relatif.

Nilai untuk panjang absolut memiliki satuan tetap, seperti px. Mereka mutlak dan independen dari semua faktor lainnya.

Namun, nilai panjang relatif tidak konstan. Mereka relatif terhadap sesuatu yang lain, seperti ukuran font item lain atau ukuran font default browser. Satuan relatif em, rem, dan vh adalah contohnya.

Unit yang dapat diskalakan lebih disukai daripada unit tetap karena pengembangan web berubah untuk mengakomodasi peningkatan jumlah perangkat karena mereka memberikan fleksibilitas yang diperlukan untuk membuat halaman web yang responsif.

Sekarang kita akan masuk lebih dalam ke em dan rem.

Apa itu em dan rem dan mengapa menggunakannya?

Relatif terhadap ukuran font elemen HTML, rem adalah unit CSS, sedangkan em relatif terhadap ukuran font elemen induk. Keduanya adalah unit yang dapat diskalakan, memungkinkan kita untuk menskalakan item ke atas atau ke bawah dalam kaitannya dengan nilai yang telah ditentukan. Hasilnya, desain kami menjadi lebih mudah beradaptasi, dan situs web kami menjadi lebih responsif.

Aksesibilitas adalah manfaat utama menggunakan unit yang dapat diskalakan seperti em dan rem. Semua pengguna, terutama penyandang disabilitas, dapat berhasil berinteraksi dengan situs web berkat aksesibilitas. Karena unit tetap tidak menskala, menggunakannya untuk mengatur nilai komponen, tipografi, dan ukuran ruang tidak memberi kita aksesibilitas ini.

Kami mencapai aksesibilitas yang ditargetkan dengan memungkinkan pengguna mengubah skala halaman web melalui penggunaan unit yang dapat diskalakan seperti em dan rem.

em vs. rem

Karena keduanya adalah unit yang dapat diskalakan, em dan rem dapat dibandingkan. Nilai mereka selalu dibandingkan dengan sesuatu yang lain.

Yang paling signifikan, cara browser mengubah em dan rem menjadi px berbeda.

Seperti yang telah ditetapkan sebelumnya, nilai rem relatif terhadap ukuran font root, atau ukuran font elemen html, sedangkan nilai em relatif terhadap ukuran font elemen induk berikutnya. Selain itu, nilai rem relatif terhadap ukuran font default 16px browser ketika ukuran font root tidak diatur secara eksplisit.

Ini menunjukkan bahwa nilai 1rem akan menjadi 16px * 1 = 16px ketika ukuran font root adalah 16px. Dan 16px * 10 Sama dengan 160px untuk nilai 10rem.

Karena nilai rem mudah dan dapat diandalkan, kami dapat dengan mudah mengontrol bagaimana elemen menskalakan seluruh halaman dari satu sumber berkat ini. Anda dapat melihat contohnya di bawah ini:

html {
  font-size: 20px;
}

@media (max-width: 900px) {
  html { font-size: 16px; }
}

@media (max-width: 400px) {
  html { font-size: 12px; }
}

h1 {
  font-size: 2.6rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.1rem;
}

Jenis ukuran font dalam kode di atas menggunakan unit rem, dan ukuran font root terpisah diatur untuk kueri @media yang berbeda. Akibatnya, jenis akan diskalakan sesuai dengan ukuran font root yang ditentukan untuk setiap kueri @media.

Ketahuilah bahwa secara eksplisit mengatur ukuran font root ke nomor px sering dianggap sebagai ide yang buruk. Akibatnya, konfigurasi browser pengguna diabaikan. Disarankan untuk menggunakan satuan persen atau menahan diri untuk tidak secara eksplisit mengatur ukuran font root. Ini meningkatkan ukuran font menjadi 16 piksel penuh, yang merupakan ukuran font default untuk sebagian besar browser.

Meskipun unit rem mudah dan dapat diprediksi, mereka terkadang tidak memberikan tingkat kontrol yang diperlukan atas bagaimana skala bagian tertentu pada halaman web. Ini karena fakta bahwa semua modul halaman web sulit untuk ditingkatkan dan diturunkan secara tepat dalam kaitannya dengan satu nilai.

Namun, karena em bergantung pada ukuran font induk terdekat, em memberikan kontrol yang lebih tepat terhadap skala bagian halaman web tertentu. Jadi, dengan menggunakan em, kita dapat mengatur penskalaan modular situs web.

Masalah dengan em dan rem

Seperti yang telah dibahas, terkadang sulit bagi semua modul untuk naik dan turun dengan tepat saat menggunakan rem. Em disarankan sebagai opsi karena komponen modul lebih cenderung naik dan turun secara tepat dalam kaitannya dengan komponen induknya. Akibatnya, setiap komponen bilah sisi akan menskala sehubungan dengan elemen bilah sisi induknya, setiap komponen tajuk akan menskala sehubungan dengan elemen tajuk induknya, dan seterusnya.

Em memungkinkan kami mengontrol skala modular atas halaman web kami, tetapi ini memiliki kekurangannya sendiri.

Kesimpulan

Unit CSS em dan rem, yang sebanding, terukur, dan relatif, dibahas dalam artikel ini. Metode yang digunakan oleh browser untuk menghitung nilai piksel, bagaimanapun, adalah perbedaan utama mereka.

Kedua unit ini memberikan fleksibilitas yang dibutuhkan desain responsif, tetapi rem lebih disukai karena kemudahan penggunaan, konsistensi, dan prediktabilitasnya. Meskipun em bisa sulit digunakan, ini mungkin pilihan terbaik jika Anda ingin menskalakan halaman Anda secara modular.