Saya ingin memuji jawaban josh3736 untuk memberikan beberapa konteks sejarah yang sangat baik. Meskipun diartikulasikan dengan baik, lanskap CSS telah berubah dalam hampir lima tahun sejak pertanyaan ini diajukan. Ketika pertanyaan ini diajukan, px adalah jawaban yang benar, tetapi itu tidak berlaku lagi hari ini.
tl; dr: gunakanrem
Tinjauan Unit
pxUnit historis biasanya mewakili satu piksel perangkat. Dengan perangkat yang memiliki kerapatan piksel lebih tinggi dan lebih tinggi, ini tidak lagi berlaku untuk banyak perangkat, seperti dengan Tampilan Retina Apple.
remunit mewakili r oot em ukuran. Ini adalah font-sizepertandingan apa pun :root. Dalam kasus HTML, itu adalah <html>elemen; untuk SVG, itu adalah <svg>elemen. Default font-sizedi setiap browser * adalah 16px.
Pada saat penulisan, remdidukung oleh sekitar 98% pengguna . Jika Anda khawatir tentang 2% lainnya, saya akan mengingatkan Anda bahwa permintaan media juga didukung oleh sekitar 98% pengguna .
Saat Menggunakan px
Mayoritas contoh CSS di internet menggunakan pxnilai karena mereka adalah standar de-facto. pt, indan berbagai unit lainnya dapat digunakan secara teori, tetapi mereka tidak menangani nilai-nilai kecil dengan baik karena Anda harus cepat menggunakan fraksi, yang lebih lama untuk mengetik, dan lebih sulit untuk dipikirkan.
Jika Anda ingin batas tipis, dengan pxyang bisa Anda gunakan 1px, dengan yang ptAnda perlukan 0.75ptuntuk hasil yang konsisten, dan itu tidak nyaman.
Saat Menggunakan rem
remNilai default 16pxbukan argumen yang sangat kuat untuk penggunaannya. Menulis 0.0625remadalah lebih buruk daripada menulis 0.75pt, jadi mengapa orang menggunakan rem?
Ada dua bagian yang remlebih diuntungkan daripada unit lainnya.
- Preferensi pengguna dihormati
- Anda dapat mengubah nilai nyata
pxdari remapa pun yang Anda inginkan
Menghargai Preferensi Pengguna
Zoom browser telah banyak berubah selama bertahun-tahun. Secara historis banyak browser hanya akan meningkat font-size, tetapi itu berubah cukup cepat ketika situs web menyadari bahwa desain pixel-perfect mereka yang indah pecah setiap kali seseorang memperbesar atau memperkecil. Pada titik ini, peramban skala seluruh halaman, sehingga zoom berbasis font keluar dari gambar.
Menghargai keinginan pengguna tidak lepas dari gambarannya. Hanya karena browser diatur 16pxsecara default, tidak berarti pengguna mana pun tidak dapat mengubah preferensi mereka 24pxatau 32pxuntuk mengoreksi low vision atau visibilitas yang buruk (ex screen glare). Jika Anda mendasarkan unit Anda rem, setiap pengguna dengan ukuran font yang lebih tinggi akan melihat situs yang lebih besar secara proporsional. Batas akan lebih besar, bantalan akan lebih besar, margin akan lebih besar, semuanya akan naik dengan lancar.
Jika Anda mendasarkan permintaan media remAnda, Anda juga dapat memastikan bahwa situs yang dilihat pengguna sesuai dengan layar mereka. Seorang pengguna dengan font-sizeset untuk 32pxpada 640pxbrowser yang luas, efektif akan melihat situs Anda seperti yang ditunjukkan untuk pengguna di 16pxpada 320pxbrowser yang lebar. Sama sekali tidak ada kerugian bagi RWD dalam menggunakan rem.
Mengubah pxNilai Yang Jelas
Karena remdidasarkan pada font-sizesatu :rootsimpul, jika Anda ingin mengubah apa yang 1remmewakili, yang harus Anda lakukan adalah mengubah font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Apa pun yang Anda lakukan, jangan setel :rootelemen font-sizeke pxnilai.
Jika Anda mengatur font-sizedi htmlsebuah pxnilai, Anda terpesona preferensi pengguna tanpa cara untuk mendapatkan mereka kembali.
Jika Anda ingin mengubah jelas nilai rem, penggunaan %unit.
Matematika untuk ini cukup mudah.
Ukuran font yang jelas :rootadalah 16px, tetapi katakanlah kita ingin mengubahnya 20px. Yang perlu kita lakukan adalah mengalikan 16nilai yang didapat 20.
Siapkan persamaan Anda:
16 * X = 20
Dan selesaikan untuk X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Melakukan segala sesuatu dalam kelipatan 20tidak terlalu bagus, tetapi saran yang umum adalah membuat ukuran yang tampak remsama dengan 10px. Angka ajaib untuk itu adalah 10/16yang mana 0.625, atau 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Masalahnya sekarang adalah bahwa default Anda font-sizeuntuk sisa halaman diatur terlalu kecil, tetapi ada perbaikan sederhana untuk itu: Setel font-sizepada bodymenggunakan rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Penting untuk dicatat, dengan penyesuaian ini di tempat, nilai nyata remadalah 10pxyang berarti nilai apa pun yang Anda tulis pxdapat dikonversi langsung ke remdengan menabrak tempat desimal.
padding: 20px;
berubah menjadi
padding: 2rem;
Ukuran font yang Anda pilih terserah Anda, jadi jika Anda mau, tidak ada alasan Anda tidak dapat menggunakan:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
dan memiliki yang 1remsama 1px.
Jadi begitulah, solusi sederhana untuk menghormati keinginan pengguna sambil juga menghindari terlalu rumitnya CSS Anda.
Tunggu, jadi apa masalahnya?
Saya takut Anda mungkin bertanya itu. remMeskipun saya ingin berpura-pura bahwa itu adalah sihir dan memecahkan segalanya, masih ada beberapa masalah yang perlu diperhatikan. Tidak ada yang melanggar kesepakatan menurut saya , tapi saya akan memanggil mereka sehingga Anda tidak bisa mengatakan saya tidak memperingatkan Anda.
Kueri Media (gunakan em)
Salah satu masalah pertama yang akan Anda hadapi remadalah pertanyaan media. Pertimbangkan kode berikut:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Di sini nilai remperubahan tergantung pada apakah permintaan media berlaku, dan permintaan media tergantung pada nilai rem, jadi apa yang sedang terjadi?
remdalam pertanyaan media menggunakan nilai awal font-sizedan seharusnya tidak (lihat bagian Safari) memperhitungkan perubahan apa pun yang mungkin terjadi font-sizepada :rootelemen. Dengan kata lain, nilainya selalu terlihat 16px .
Ini agak menjengkelkan, karena itu berarti Anda harus melakukan beberapa perhitungan fraksional, tetapi saya telah menemukan bahwa sebagian besar pertanyaan media sudah menggunakan nilai yang merupakan kelipatan 16.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Selain itu jika Anda menggunakan preprosesor CSS, Anda dapat menggunakan mixin atau variabel untuk mengelola kueri media Anda, yang akan menutupi masalah sepenuhnya.
Safari
Sayangnya ada bug yang diketahui dengan Safari di mana perubahan :rootukuran font benar-benar mengubah nilai yang dihitung remuntuk rentang kueri media. Ini dapat menyebabkan beberapa perilaku yang sangat aneh jika ukuran font :rootelemen diubah dalam kueri media. Untungnya perbaikannya sederhana: gunakan emunit untuk pertanyaan media .
Pengalihan Konteks
Jika Anda beralih di antara berbagai proyek berbagai proyek, sangat mungkin ukuran font yang terlihat remakan memiliki nilai yang berbeda. Dalam satu proyek, Anda mungkin menggunakan ukuran yang jelas 10pxdi mana dalam proyek lain ukurannya mungkin 1px. Ini bisa membingungkan dan menyebabkan masalah.
Satu-satunya rekomendasi saya di sini adalah untuk tetap dengan 62.5%mengkonversi remke ukuran yang jelas 10px, karena itu lebih umum dalam pengalaman saya.
Pustaka CSS bersama
Jika Anda menulis CSS yang akan digunakan di situs yang tidak Anda kontrol, seperti untuk widget yang disematkan, benar-benar tidak ada cara yang baik untuk mengetahui ukuran apa yang tampak rem. Jika itu masalahnya, jangan ragu untuk tetap menggunakan px.
Jika Anda masih ingin menggunakan rem, pertimbangkan untuk merilis versi Sass atau KURANG dari stylesheet dengan variabel untuk mengesampingkan penskalaan untuk ukuran yang jelas rem.
* Saya tidak ingin membuat orang lain takut menggunakan rem, tetapi saya belum dapat secara resmi mengkonfirmasi bahwa setiap browser menggunakan 16pxsecara default. Anda tahu, ada banyak browser dan tidak akan terlalu sulit bagi satu browser untuk menyimpang sedikit, katakanlah 15pxatau 18px. Dalam pengujian, namun saya belum melihat satu contoh di mana browser menggunakan pengaturan default dalam sistem menggunakan pengaturan standar memiliki nilai selain 16px. Jika Anda menemukan contoh seperti itu, silakan bagikan dengan saya.
