Haruskah saya menggunakan px atau unit nilai rem di CSS saya? [Tutup]

375

Saya merancang situs web baru dan saya ingin agar kompatibel dengan sebanyak mungkin browser dan pengaturan browser. Saya mencoba memutuskan satuan pengukuran apa yang harus saya gunakan untuk ukuran font dan elemen saya, tetapi saya tidak dapat menemukan jawaban konklusif.

Pertanyaan saya adalah: apakah saya harus menggunakan pxatau remdalam CSS saya?

  • Sejauh ini saya tahu bahwa menggunakan pxtidak kompatibel dengan pengguna yang menyesuaikan ukuran font dasar mereka di browser mereka.
  • Saya telah mengabaikan emkarena mereka lebih merepotkan untuk mempertahankan, dibandingkan dengan rems, ketika mereka mengalir.
  • Ada yang mengatakan bahwa remresolusi mandiri dan karenanya lebih diinginkan. Tetapi yang lain mengatakan bahwa sebagian besar browser modern memperbesar semua elemen secara merata, jadi menggunakan pxbukanlah masalah.

Saya menanyakan hal ini karena ada banyak pendapat berbeda tentang ukuran jarak yang paling diinginkan dalam CSS, dan saya tidak yakin mana yang terbaik.

html css distance units-of-measurement TylerH
sumber
4
Ini masalah perselisihan dan argumentasi dan pendapat, bukan jenis pertanyaan teknis yang bagus di SO. Omong-omong, jawaban yang benar adalah "Tidak." ☺
Jukka K. Korpela
2
Bahkan komentarnya sudah usang. Hanya karena OP meminta pendapat yang benar, tidak berarti kita hanya akan memberikan pendapat sendiri. Hampir 8 tahun kemudian, pertanyaan ini menunjukkan masih ada minat tentang bagaimana subjek berkembang. Jawaban saat ini dibuktikan dan cukup teknis dan TIDAK pendapat. Untuk itu saya sarankan untuk mengedit kata "pendapat" menjadi "pengalaman" agar kita tidak jatuh dalam perangkap untuk membuka kembali dan menutup pertanyaan berulang kali.
Tim Vermaelen
2
@TimVermaelen pertanyaan ini hanya ditutup sekali seumur hidup. Perubahan yang dibuat bukan sesuatu yang substantif, karena jawabannya masih sepenuhnya tergantung pada konteks yang tidak mungkin diberikan kecuali OP mengedit pertanyaan untuk ditanyakan tentang skenario tertentu. Tidak ada opsi "terbaik" untuk semua kasus, jadi pertanyaan ini didasarkan pada pendapat.
TylerH

Jawaban:

418

TL; DR: gunakan px.

Fakta

  • Pertama, sangat penting untuk mengetahui bahwa per spec , pxunit CSS tidak sama dengan satu piksel tampilan fisik. Ini selalu benar - bahkan dalam spesifikasi CSS 1 1996 .

    CSS mendefinisikan piksel referensi , yang mengukur ukuran piksel pada tampilan 96 dpi. Pada layar yang memiliki dpi jauh berbeda dari 96dpi (seperti tampilan Retina), agen pengguna mengubah ukuran pxunit sehingga ukurannya cocok dengan piksel referensi. Dengan kata lain, pengubahan ukuran ini adalah persis mengapa 1 piksel CSS sama dengan 2 piksel tampilan Retina fisik.

    Yang mengatakan, hingga 2010 (dan meskipun situasi zoom mobile), pxhampir selalu sama dengan satu pixel fisik, karena semua tampilan yang tersedia secara luas sekitar 96dpi.

  • Ukuran yang ditentukan dalam ems relatif terhadap elemen induk . Ini mengarah pada em"masalah penggabungan" di mana elemen bersarang menjadi semakin besar atau lebih kecil. Sebagai contoh:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Memberi kami:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • CSS3 rem, yang selalu relatif hanya untuk htmlelemen root , sekarang didukung pada 96% dari semua browser yang digunakan .

Opini

Saya pikir semua orang setuju bahwa itu baik untuk merancang halaman Anda untuk mengakomodasi semua orang, dan untuk membuat pertimbangan bagi tunanetra. Salah satu pertimbangan seperti itu (tetapi bukan satu-satunya!) Adalah memungkinkan pengguna untuk membuat teks situs Anda lebih besar, sehingga lebih mudah dibaca.

Pada awalnya, satu-satunya cara untuk memberikan pengguna cara untuk skala ukuran teks adalah dengan menggunakan unit ukuran relatif (seperti ems). Ini karena menu ukuran font browser hanya mengubah ukuran font root. Jadi, jika Anda menentukan ukuran font px, mereka tidak akan skala saat mengubah opsi ukuran font browser.

Peramban modern (dan bahkan IE7 yang tidak terlalu modern) semua mengubah metode penskalaan standar untuk hanya memperbesar segala sesuatu, termasuk gambar dan ukuran kotak. Pada dasarnya, mereka membuat piksel referensi lebih besar atau lebih kecil.

Ya, seseorang masih bisa berubah gaya default browser mereka untuk men-tweak ukuran font default (setara dengan gaya lama ukuran font pilihan), tapi itu cara yang sangat esoteris akan hal itu dan saya akan bertaruh tidak ada 1 melakukannya. (Di Chrome, itu terkubur di bawah pengaturan lanjutan, konten Web, Ukuran Font. Di IE9, ini bahkan lebih tersembunyi. Anda harus menekan Alt, dan pergi ke Lihat, Ukuran Teks.) Jauh lebih mudah untuk hanya memilih opsi Zoom di menu utama browser (atau gunakan Ctrl+ +/ -/ roda mouse).

1 - dalam kesalahan statistik, secara alami

Jika kami menganggap sebagian besar pengguna skala halaman menggunakan opsi zoom, saya menemukan unit relatif sebagian besar tidak relevan. Jauh lebih mudah untuk mengembangkan halaman Anda ketika semuanya ditentukan dalam unit yang sama (semua gambar ditangani dalam piksel), dan Anda tidak perlu khawatir tentang peracikan. ( "Saya diberi tahu bahwa tidak akan ada matematika" - ada yang berurusan dengan harus menghitung apa yang sebenarnya 1,5em berhasil.)

Satu masalah potensial lainnya dari penggunaan hanya unit relatif untuk ukuran font adalah font yang diubah ukuran pengguna dapat merusak asumsi tata letak yang Anda buat. Misalnya, ini dapat menyebabkan teks terpotong atau berjalan terlalu lama. Jika Anda menggunakan unit absolut, Anda tidak perlu khawatir tentang ukuran font yang tidak terduga dari melanggar tata letak Anda.

Jadi jawaban saya adalah menggunakan satuan pixel. Saya gunakan pxuntuk semuanya. Tentu saja, situasi Anda dapat bervariasi, dan jika Anda harus mendukung IE6 (semoga para dewa RFC mengasihani Anda), Anda harus emtetap menggunakan s.

josh3736
sumber
43
Anda harus menggunakan piksel dan rem. Jadi browser yang lebih baru mendapatkan rem dan browser lama kembali ke piksel (seperti yang dilakukan WordPress 2012). Ini dapat diotomatisasi dengan Sass atau Kurang sehingga yang Anda lakukan hanyalah memasukkan nilai px dan secara otomatis menampilkan px dan rem.
cchiera
63
Pertengkaran besar saya dengan argumen ini adalah bahwa ketika menyesuaikan ukuran font dan spasi pada breakpoints responsif Anda dapat mengatur ukuran font baru pada elemen html dan setiap pengukuran yang Anda atur di rem akan secara otomatis menyesuaikan, sementara dengan px Anda harus menulis aturan baru untuk setiap pengukuran yang ingin Anda ubah. Tentu saja lebih banyak penyesuaian mungkin akan diperlukan bahkan ketika menggunakan rem, tetapi dengan perencanaan yang cerdas Anda mendapatkan sejumlah besar penskalaan proporsional secara gratis. Mengikat pengukuran spasi kotak tertentu untuk mengetik, kode lebih ringan, dan kompleksitas kurang / lebih rawatan sama dengan kemenangan yang jelas untuk rem kepada saya.
RobW
16
Dengan asumsi bahwa tidak ada pengguna yang mengubah pengaturan ukuran font cukup tebal. Klaim semacam itu harus didukung dengan data. Kalau tidak, itu hanya cara untuk mengasingkan beberapa pengguna yang sudah rapuh (ppl tunanetra berat). Jika Anda bisa, gunakan rem bukan px. IMO, aplikasi harus dapat skala secara mandiri antarmuka mereka dan ukuran font. "Gunakan saja px" adalah apa yang ingin didengar oleh banyak devs yang ingin mendengar masalah ems, tetapi itu bukan jawaban yang tepat untuk web.
Olivvv
18
Akan lebih baik untuk memiliki tindak lanjut tentang ini. Rem sekarang di 95% + dukungan.
Belajar statistik dengan contoh
10
Salah, saya tidak peduli tentang IE (tidak ada yang harus).
Vahid Amiri
194

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>
Luaskan cuplikan

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>
Luaskan cuplikan

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>
Luaskan cuplikan

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>
Luaskan cuplikan

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.

zzzzBov
sumber
Saya tahu ini terlambat tapi, saya suka cara menggunakan REM, tapi saya punya masalah menggunakan rem adalah ketika saya menggunakan matrix()javascript yang menggunakan nilai-nilai matriks translate px(koreksi saya jika saya salah), dan saya sangat bingung dengan itu .
Ampersanda
3
@ Ampersanda, dalam JavaScript Anda sebagian besar akan menggunakan nilai piksel yang dihitung. Rekomendasi saya adalah untuk beralih kelas di mana mungkin sehingga CSS dapat mengatur bagaimana segala sesuatu terlihat. Untuk beberapa hal, Anda tidak akan dapat menghindari menggunakan JS untuk menghitung nilai piksel, jadi taruhan terbaik Anda adalah menghitung nilai piksel dari status DOM.
zzzzBov
Saya mengerti, jadi saya harus getComputedStyle()tetapi hasilnya selalu pada pixel, jadi saya harus membagi hasilnya dengan remnilai (seperti 16). CMIIW
Ampersanda
@Ampersanda hanya jika Anda benar-benar menghasilkan remnilai, jika Anda sudah memiliki nilai yang benar px, tidak perlu beralih ke remunit untuk hal-hal yang sudah dihitung untuk konteks yang diberikan.
zzzzBov
1
memiliki 1rem sama dengan 1px Hal ini menyebabkan masalah karena ukuran font minimum Chrome: stackoverflow.com/questions/44378664/… stackoverflow.com/questions/24200797/…
Paul
44

Artikel ini menjelaskan cukup baik pro dan kontra dari px, em, dan rem.

Penulis akhirnya menyimpulkan bahwa metode terbaik mungkin menggunakan keduanya pxdan rem, mendeklarasikan pxterlebih dahulu untuk peramban yang lebih lama dan mendeklarasikan ulang remuntuk peramban yang lebih baru:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
uzyn
sumber
1
Ya, itulah yang membuat saya tertarik pada rem di tempat pertama. Dua hal yang saya tidak mengerti: dia hanya menyarankan itu sebagai satuan pengukuran untuk font (bukan elemen), dan jika saya memahaminya dengan benar satu-satunya alasan sebenarnya untuk menggunakan (r) em adalah agar pengguna IE dapat mengubah ukuran teks?
1
@Samuel saya percaya begitu. Jika tidak untuk mengubah ukuran teks, saya yakin kami lebih suka menggunakan px. Adapun unit untuk elemen, menempel pxakan lebih baik karena Anda biasanya ingin mengukur elemen dengan tepat.
uzyn
Tetapi jika Anda melakukannya, pengaturan browser apa pun yang mengubah ukuran font dasar akan mengacaukan tata letak Anda, bukan? Kenapa tidak rem untuk semuanya?
1
Seperti banyak komentar yang dicatat di sini , alasan kami perlu parit pxadalah untuk memungkinkan pengubahan ukuran. Sekarang jika kita menggunakan rem, kita masih harus menyediakan pxfallback (di browser lama). Pada dasarnya apa artinya pxmengubah ukuran dukungan lebih baik daripada rem. Browser yang lebih baru mendukung pxpengubahan ukuran dan untuk browser yang lebih tua cara apa pun yang akan kita gunakan untuk mundur px. Sekarang berdasarkan pada kesimpulan ini, saya sangat tertarik untuk mengetahui, mengapa menggunakan rem? Jika saya dapat melihat cahaya di ujung terowongan.
fusionstrings
3
Tidak ada jaminan bahwa nilai-nilai seperti 62,5% = 10px. Itu hanya berlaku ketika ukuran font default browser telah diatur ke 16px. Meskipun ini default, itu tidak dijamin.
cimmanon
7

Sebagai jawaban refleks, saya akan merekomendasikan menggunakan rem, karena memungkinkan Anda untuk mengubah "tingkat pembesaran" dari seluruh dokumen sekaligus, jika perlu. Dalam beberapa kasus, ketika Anda ingin ukuran relatif terhadap elemen induk, maka gunakan em.

Tetapi dukungan rem sangat buruk, IE8 membutuhkan polyfill, dan Webkit menunjukkan bug. Selain itu, penghitungan sub-piksel dapat menyebabkan hal-hal seperti satu garis piksel terkadang hilang. Obatnya adalah kode dalam piksel untuk elemen yang sangat kecil. Itu semakin menambah kerumitan.

Jadi, secara keseluruhan, tanyakan pada diri Anda apakah itu layak - seberapa penting dan mungkin Anda mengubah "tingkat pembesaran" dari seluruh dokumen dalam CSS?

Untuk beberapa kasus itu ya, untuk beberapa kasus itu tidak akan.

Jadi, itu tergantung pada kebutuhan Anda, dan Anda harus mempertimbangkan pro dan kontra, karena menggunakan rem dan em memperkenalkan beberapa pertimbangan tambahan dibandingkan dengan alur kerja berbasis pixel "normal".

Ingatlah bahwa mudah untuk mengganti (atau lebih tepatnya mengubah) CSS Anda dari px ke rem (JavaScript adalah cerita lain), karena dua blok kode CSS berikut akan menghasilkan hasil yang sama:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
Rolf
sumber
6

Ya, REM dan PX adalah relatif namun jawaban lain menyarankan untuk menggunakan REM daripada PX, saya juga ingin mencadangkannya menggunakan contoh aksesibilitas.
Ketika pengguna mengatur ukuran font yang berbeda pada browser, REM secara otomatis memperbesar dan memperkecil elemen-elemen seperti font, gambar dll pada halaman web yang tidak terjadi pada PX.

Di bawah ini gif teks sisi kiri diatur menggunakan unit ukuran font REM sedangkan font sisi kanan diatur oleh unit PX.

masukkan deskripsi gambar di sini

Seperti yang Anda lihat bahwa REM ditingkatkan / turun secara otomatis ketika saya mengubah ukuran ukuran halaman web standar. (Sisi kanan bawah)

Ukuran font default dari sebuah halaman web adalah 16px yang sama dengan 1 rem (hanya untuk halaman html standar yaitu html{font-size:100%}), jadi, 1,25rem sama dengan 20px.

PS: siapa lagi yang menggunakan REM? Kerangka CSS! seperti Bootstrap 4, Bulma CSS dll, jadi lebih baik bergaul dengannya.

JerryGoyal
sumber
3

Jawaban josh3736 adalah jawaban yang bagus, tetapi untuk memberikan tandingan 3 tahun kemudian:

Saya sarankan menggunakan remunit untuk font, jika hanya karena itu memudahkan Anda , pengembang, untuk mengubah ukuran. Memang benar bahwa pengguna sangat jarang mengubah ukuran font default di browser mereka, dan bahwa zoom browser modern akan meningkatkan pxunit. Tetapi bagaimana jika bos Anda mendatangi Anda dan berkata "jangan perbesar gambar atau ikonnya, tapi buat semua font lebih besar" Jauh lebih mudah untuk hanya mengubah ukuran font root dan membiarkan semua skala font lain relatif terhadap itu, kemudian mengubah pxukuran dalam lusinan atau ratusan aturan css.

Saya pikir masih masuk akal untuk menggunakan pxunit untuk beberapa gambar, atau untuk elemen tata letak tertentu yang harus selalu memiliki ukuran yang sama terlepas dari skala desain.

Caniuse.com mungkin mengatakan bahwa hanya 75% browser ketika josh3736 memposting jawabannya di 2012, tetapi pada 27 Maret mereka mengklaim 93,78% dukungan . Hanya IE8 yang tidak mendukungnya di antara peramban yang mereka lacak.

Joshua Carmody
sumber
1
Only IE8 doesn't support it among the browsers they track.Hah? Halaman yang ditautkan menyatakan bahwa “IE9 & IE10 tidak mendukung unit rem ketika digunakan dalam properti font steno atau ketika digunakan pada elemen pseudo. IE9, 10 & 11 tidak mendukung unit rem ketika digunakan dalam properti line-height ketika digunakan pada: sebelum dan: setelah elemen pseudo. Perbatasan pada rem menghilang ketika halaman diperbesar dalam Chrome. Tidak berfungsi di peramban Samsung Note II Android 4.3 & Samsung Galaxy Tab 2 di Android 4.2. Chrome 31-34 & Android berbasis Chrome (seperti 4.4) memiliki bug ukuran font yang terjadi ketika elemen root memiliki ukuran berbasis persentase. "
e-sushi
Juga, terkait dengan Anda as of March 27 they claim 93.78% support.Pada saat menulis komentar ini, caniuse hanya menunjukkan 91,79% dukungan browser penuh. Melihat persentase Anda, saya cukup yakin Anda menyertakan dukungan browser buggy juga (saat ini di 2,8%, yang dapat ditafsirkan sebagai cakupan keseluruhan 94,6% optimis - tetapi kenyataannya adalah bahwa 2,8% datang dengan kereta, tidak lengkap atau bahkan sepenuhnya gagal dukungan ... seperti yang tercantum dalam komentar saya sebelumnya: setiap bug menjadi hasil dari browser versi yang berbeda dan operasi kombinasi sistem) Anda mungkin ingin memperbaiki jawaban Anda sesuai ....
e-sushi
1

Saya telah menemukan cara terbaik untuk memprogram ukuran font suatu situs web adalah dengan menentukan ukuran font dasar untuk bodydan kemudian menggunakan em (atau rem) untuk setiap lainnya yang font-sizesaya nyatakan setelah itu. Itu preferensi pribadi saya kira, tetapi itu melayani saya dengan baik dan juga membuatnya sangat mudah untuk memasukkan desain yang lebih responsif .

Sejauh menggunakan unit rem, saya pikir itu baik untuk menemukan keseimbangan antara menjadi progresif dalam kode Anda, tetapi juga menawarkan dukungan untuk browser yang lebih lama. Lihat tautan ini tentang dukungan peramban untuk unit rem , yang seharusnya membantu jumlah yang baik pada keputusan Anda.

cereallarceny
sumber
Baik. Tapi desain responsif sama mudahnya dilakukan dengan unit px kan (hanya menulis pertanyaan media Anda berdasarkan px bukan em)?
Anda dapat, bagaimanapun, jika Anda ingin membuat ukuran font Anda lebih kecil karena lebar viewport situs web Anda menjadi lebih kecil maka Anda dapat mengubah bodyukuran font dan semuanya berubah dengannya.
cereallarceny
Saya tidak terlalu khawatir tentang dukungan browser. Saya hanya akan menyertakan ukuran px fallback untuk semua ukuran, sehingga browser yang lebih lama memiliki sesuatu untuk ditafsirkan.
Kemudian gunakan cara progresif dengan menggunakan rem. Selama Anda memberikan mundur, maka saya tidak melihat ada salahnya. Bagi saya, ini sepertinya pekerjaan ekstra, tetapi mungkin tidak dalam situasi Anda.
cereallarceny
0

ptmirip dengan rem, dalam hal ini relatif tetap, tetapi hampir selalu DPI-independen, bahkan ketika browser yang tidak patuh memperlakukan pxdengan cara yang tergantung pada perangkat. rembervariasi dengan ukuran font elemen root, tetapi Anda dapat menggunakan sesuatu seperti Sass / Kompas untuk melakukan ini secara otomatis pt.

Jika Anda punya ini:

html {
    font-size: 12pt;
}

maka 1remakan selalu demikian 12pt. remdan emhanya bergantung pada perangkat seperti elemen yang menjadi sandarannya; beberapa browser tidak berperilaku sesuai dengan spesifikasi, dan memperlakukan pxsecara harfiah. Bahkan di masa lalu Web, 1 poin secara konsisten dianggap 1/72 inci - artinya, ada 72 poin dalam satu inci.

Jika Anda memiliki browser lama yang tidak memenuhi syarat, dan Anda memiliki:

html {
    font-size: 16px;
}

maka 1remakan tergantung pada perangkat. Untuk elemen yang akan mewarisi dari htmlsecara default, 1emjuga akan tergantung pada perangkat. 12ptakan menjadi setara perangkat- semoga dijamin:: di 16px / 96px * 72pt = 12ptmana 96px = 72pt = 1in.

Menghitung matematika bisa sangat rumit jika Anda ingin tetap menggunakan unit tertentu. Misalnya .75em of html = .75rem = 9pt,, dan .66em of .75em of html = .5rem = 6pt. Aturan praktis yang baik:

  • Gunakan ptuntuk ukuran absolut. Jika Anda benar-benar membutuhkan ini untuk menjadi relatif dinamis terhadap elemen root, Anda meminta terlalu banyak CSS; Anda memerlukan bahasa yang dapat dikompilasi ke CSS, seperti Sass / SCSS.
  • Gunakan emuntuk ukuran relatif. Cukup mudah untuk dapat mengatakan, "Saya ingin margin di sebelah kiri sekitar lebar maksimum huruf," atau, "Buat teks elemen ini sedikit lebih besar dari sekelilingnya." <h1>adalah elemen yang baik untuk menggunakan ukuran font di ems, karena mungkin muncul di berbagai tempat, tetapi harus selalu lebih besar dari teks di dekatnya. Dengan cara ini, Anda tidak perlu memiliki ukuran font terpisah untuk setiap kelas yang diterapkan h1: ukuran font akan beradaptasi secara otomatis.
  • Gunakan pxuntuk ukuran yang sangat kecil. Pada ukuran yang sangat kecil, ptbisa menjadi buram di beberapa browser pada 96 DPI, karena ptdan pxtidak cukup berbaris. Jika Anda hanya ingin membuat batas tipis satu piksel, katakan demikian. Jika Anda memiliki tampilan DPI tinggi, ini tidak akan terlihat jelas bagi Anda selama pengujian, jadi pastikan untuk menguji pada tampilan generik 96-DPI di beberapa titik.
  • Jangan berurusan dengan subpiksel untuk membuat hal-hal bagus di layar DPI tinggi. Beberapa browser mungkin mendukungnya - terutama pada tampilan DPI tinggi - tetapi ini adalah tidak-tidak. Sebagian besar pengguna lebih suka yang besar dan jelas, meskipun web telah mengajari kami para pengembang. Jika Anda ingin menambahkan detail yang diperluas untuk pengguna Anda dengan layar canggih, Anda dapat menggunakan grafik vektor (baca: SVG), yang seharusnya Anda lakukan.
Zenexer
sumber
1
pt untuk media cetak dan tidak boleh digunakan untuk layar
sf
@sf CSS mendefinisikan pt dan px sedemikian rupa sehingga mereka selalu memiliki rasio yang sama, meskipun secara teknis penggunaan istilah-istilah tersebut tidak akurat (72pt = 96px = 1in). Bahkan, dalam CSS, px sebenarnya bukan pixel perangkat tunggal. Di layar saya, 1px adalah 2 piksel perangkat. Keuntungan menggunakan pt lebih dari px adalah Anda dapat dengan mudah menentukan ukuran elemen relatif terhadap ukuran terkait teks.
Zenexer
-2

Setengah (tetapi hanya setengah) jawaban yang snarky (setengah lainnya adalah penghinaan terhadap realitas birokrasi):

Gunakan vh

Semuanya selalu berukuran ke jendela browser.

Selalu izinkan gulir ke bawah, jangan ke samping.

Setel lebar badan menjadi 50vh statis, dan tidak ada yang mengapung atau keluar dari div induk. Dan gaya hanya menggunakan meja sehingga semuanya dipegang dengan kaku pada tempatnya seperti yang diharapkan. Sertakan fungsi javascript untuk membatalkan aktivitas ctrl +/- yang dilakukan pengguna.

Semua orang akan membenci Anda kecuali orang-orang yang memberi tahu Anda untuk membuat hal-hal yang sesuai dengan mock-up mereka, dan mereka akan senang. Dan semua orang tahu pendapat mereka adalah satu-satunya yang penting.

liljoshu
sumber
-3

Iya. Atau, lebih tepatnya, tidak.

Eh, maksudku, itu tidak masalah. Gunakan yang masuk akal untuk proyek khusus Anda. PX dan EM atau keduanya sama-sama valid tetapi akan berperilaku sedikit berbeda tergantung pada arsitektur CSS keseluruhan halaman Anda.

MEMPERBARUI:

Untuk memperjelas, saya menyatakan bahwa biasanya tidak masalah yang Anda gunakan. Terkadang, Anda mungkin secara khusus ingin memilih satu di atas yang lain. EM bagus jika Anda bisa mulai dari awal dan ingin menggunakan ukuran font dasar dan membuat segalanya relatif terhadap itu.

PX sering diperlukan ketika Anda sedang memasang kembali desain ulang ke basis kode yang ada dan membutuhkan kekhususan px untuk mencegah masalah bersarang yang buruk.

DA.
sumber
Jadi jawaban Anda adalah tidak masalah? Atau ada situasi tertentu di mana Anda akan menghargai satu lebih dari yang lain? Dan jika demikian, dalam situasi apa ini akan terjadi?
@Samuel ya, mungkin ada saatnya Anda ingin menggunakan satu atau yang lain. Saya telah memperbarui jawaban saya dengan lebih banyak info.
DA.
Maaf, saya agak bingung dengan kata-kata aslinya. Itu mengira Anda memiliki REM dalam judul dan EM dalam tubuh. Tampaknya Anda secara khusus bertanya tentang REM. Jawabannya masih hampir sama, tetapi REM memang memiliki beberapa manfaat tambahan untuk dipertimbangkan tetapi terutama digunakan sama dengan EM - ini memungkinkan Anda untuk menggunakan ukuran font 'dasar'.
DA.
Mengapa " mereka [...] bagus jika Anda bisa mulai dari awal dan ingin menggunakan ukuran font dasar dan membuat segalanya relatif terhadap itu. "? Apa keuntungan dari (r) em lebih dari px? Apakah begitu pengguna IE dapat mengubah ukuran teks, atau adakah keuntungan lain dari px (yang tampaknya lebih sederhana)?
EM dan REM memiliki manfaat yang sama: Anda dapat mengatur HTML atau BODY ke ukuran font tertentu (katakanlah 10px) dan kemudian semuanya diatur sebagai EM atau REM. Dengan begitu, jika Anda ingin membuat semua jenis secara proporsional lebih besar, Anda cukup mengubah satu gaya awal 10px menjadi 11px. Ini jauh lebih berguna 5 tahun yang lalu ketika kami semua membangun widget pengubah ukuran font JS khusus kami sendiri. Saat ini, peramban melakukan pekerjaan yang lebih baik dalam melakukan pembesaran (terutama ponsel) yang menurut saya jauh lebih tidak menguntungkan. Jika Anda menemukan PX lebih sederhana, maka itu menguntungkan bagi Anda dan tentu saja alasan yang masuk akal untuk menggunakan PX.
DA.
-4

mereka adalah jalan ke depan, tidak hanya untuk font tetapi Anda dapat menggunakannya dengan kotak, ketebalan garis dan hal-hal lain juga, mengapa?

Sederhananya mereka adalah satu-satunya yang skala bersamaan dengan tombol alt + dan di browser untuk zoom.

Skala pengukuran lainnya, tetapi tidak sebersih em.

Selain itu, jika Anda menginginkan penskalaan terbaik, konversikan grafik Anda ke SVG berbasis vektor jika memungkinkan juga karena ini juga akan berskala bersih dengan rasio zoom browser.

shawty
sumber
3
Tetapi sebagian besar browser saat ini memperbesar semua elemen halaman secara merata (kecuali jika Anda menyesuaikan ukuran font dasar), sehingga keuntungan menggunakan (r) em tidak benar untuk browser modern, kan?
Itu dan tidak, sementara Anda benar dalam apa yang Anda katakan, itu lebih tentang faktor penskalaan sebagai lawan dari penskalaan delta. Delta akan selalu seragam terlepas dari pengukuran yang digunakan, tetapi faktor skala (asalkan matematika dilakukan dengan benar) akan menyesuaikan sesuai kebutuhan untuk mengatakan monitor layar lebar vs monitor standar, atau piksel persegi panjang vs piksel persegi. Karena rem sebenarnya didasarkan pada pengukuran yang benar pada printer maka penskalaan akan selalu lebih sesuai, yang lain (seperti%) sering kali merupakan delta offset terbaik
shawty
(lanjutan) dengan penggandaan yang diterapkan di kedua arah, dan sebagai hasilnya dapat dalam beberapa kasus memberikan rasio penglihatan yang sangat tidak proporsional.
shawty
2
"Sederhananya mereka adalah satu-satunya yang skala bersamaan dengan alt + dan alt-tombol di browser untuk zoom." = itu tidak benar.
DA.
Ok jadi saya bisa mengatakannya lebih baik, lihat komentar saya sebelumnya untuk koreksi.
shawty
-5

EM adalah HANYA hal yang menskala untuk kueri media yang menangani skala +/-, yang dilakukan orang sepanjang waktu, bukan hanya orang buta. Inilah demonstrasi profesional lain yang ditulis dengan sangat baik tentang mengapa ini penting.

Omong-omong, inilah sebabnya Zurb Foundation menggunakan ems , sedangkan Bootstrap 3 yang lebih rendah masih menggunakan piksel.

robmuh
sumber
2
Ini tidak benar. Di masa lalu, piksel tidak dapat diperbesar dalam versi IE lama. +/- sekarang melakukan zoom halaman penuh di semua browser saat ini, jadi ini bukan masalah. Selain itu pertanyaan ini adalah tentang rem daripada px - bukan em vs px.
Rich Bradshaw
1
Kalian membuatku tertawa. Pernahkah Anda mencoba mengukur situs Anda menggunakan +/- menggunakan piksel? Tulisan tentang piksel diperbesar salah. Pilih saya yang Anda inginkan. Suara tidak mengubah kenyataan.
robmuh
1
Mungkin kita mengambil hal-hal yang sedikit berbeda - ada kemungkinan Anda dapat membuat demo sederhana untuk menunjukkan perbedaannya?
Rich Bradshaw
Saya tidak berpikir pertanyaannya adalah tentang unit apa yang digunakan dalam pertanyaan media ...
binki