Kekuatan unit EM di CSS

3

Takeaways Key

• Dalam CSS, unit EM adalah sama dengan saiz font yang dikira untuk elemen yang digunakan EM. Apabila unit EM diisytiharkan pada unsur-unsur kanak-kanak yang tidak mempunyai saiz fon yang ditakrifkan, mereka mewarisi saiz fon mereka dari ibu bapa mereka, atau dari elemen nenek moyang yang lain.
• unit em berfungsi dengan baik dengan teknik CSS modular seperti gaya peringkat komponen atau bahagian kod yang terkandung. Mereka boleh digunakan untuk memastikan bahawa unsur -unsur komponen semuanya bersaiz antara satu sama lain, dan membolehkannya dengan mudah diubahsuai.
• Unit REM dalam CSS sentiasa mewarisi nilainya dari tetapan saiz fon asas pada elemen akar dokumen, tanpa mengira saiz fon yang dikira. Jadi, anda boleh menggunakan REMS, tetapi ini bermakna anda perlu mengawal semua komponen pada halaman menggunakan saiz fon pada elemen itu.
• unit em menawarkan beberapa kelebihan berbanding piksel. Mereka berskala, bermakna mereka menyesuaikan berdasarkan tetapan penyemak imbas lalai pengguna atau tetapan peranti mereka. Ini menjadikan laman web anda lebih mudah diakses oleh pengguna dengan kecacatan visual yang mungkin perlu meningkatkan saiz fon. Unit EM juga membolehkan reka bentuk yang lebih fleksibel dan responsif, kerana mereka menyesuaikan berdasarkan saiz font elemen induk.

Dengan setiap ciri kompleks dalam CSS, anda akan sentiasa mempunyai titik perubahan apabila anda melihat betapa hebatnya ciri ini. Dan, percayalah atau tidak, titik perubahan peribadi saya dengan EMS datang lama selepas saya menulis pengenalan yang penuh dengan subjek. Walaupun saya memahami EMS dengan cukup baik pada ketika itu, saya benar -benar mula melihat betapa kuatnya mereka ketika saya membaca jawatan Simurai pada komponen saiz yang disebut saiz (web). Jadi saya akan menunggang coattails dalam jawatan ini. Di sini anda akan mendapat pengenalan cepat kepada unit EM, diikuti dengan demonstrasi langsung teknik yang dia gambarkan.

Apa EMS dalam CSS?

Dalam CSS, unit EM adalah sama dengan saiz fon yang dikira untuk elemen yang mana EM digunakan. Apabila unit EM diisytiharkan pada unsur-unsur kanak-kanak yang tidak mempunyai saiz fon yang ditakrifkan, mereka akan mewarisi saiz fon mereka dari ibu bapa mereka, atau dari elemen nenek moyang yang lain, mungkin akan kembali ke elemen akar pada dokumen. Lihat CSS berikut:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>}</span>

Dalam kes ini, 1EM pada elemen ini, atau pada unsur-unsur anaknya (dengan tidak mengandaikan definisi saiz font lain), akan sama dengan 20px. Jadi jika kami menambah garis:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>}</span>

Nilai radius sempadan ini .5EM mengira hingga 10px (iaitu 20*.5). Begitu juga:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>padding: 2em;
</span><span>}</span>

Nilai padding 2EM adalah sama dengan 40px (20*2). Seperti yang dinyatakan, pengiraan jenis ini akan digunakan untuk mana-mana elemen kanak-kanak juga-melainkan jika mana-mana unsur-unsur kanak-kanak mempunyai nilai saiz fon yang jelas, di mana nilai EM akan dikira berdasarkan itu. Jika tiada saiz fon ditakrifkan di mana sahaja di CSS, unit EM akan sama dengan saiz fon lalai penyemak imbas untuk dokumen, yang biasanya 16px. Saya fikir ia harus menjelaskan bagaimana EMS berfungsi. Sekarang mari kita lihat bagaimana teknik ini boleh digunakan untuk membuat komponen web yang mudah disesuaikan, seperti yang dibincangkan oleh Simurai dalam artikel Medium asal. Saya akan mengambil ideanya satu langkah lebih jauh dengan memberikan demo untuk melihat ini dalam tindakan.

bila menggunakan em dalam css

Unit EM berfungsi dengan baik dengan teknik CSS modular seperti gaya peringkat komponen atau bahagian kod terkandung secara umum. Sebagai contoh, mereka boleh digunakan untuk memastikan bahawa unsur -unsur komponen (misalnya kad) semuanya bersaiz relatif antara satu sama lain, dan membolehkannya dengan mudah diubahsuai. Teknik ini pada dasarnya berfungsi seperti ini: harta saiz fon digunakan, seperti yang dirujuk Simurai, sebagai "kuda Trojan", mewujudkan unit asas untuk pelbagai elemen di dalam komponen kami, atau modul. Oleh kerana unit EM, seperti yang diterangkan di atas, dikira berdasarkan saiz fon yang ditentukan oleh akar pada elemen induk, ini menjadikan keseluruhan komponen mudah disusun semula dengan hanya mengubah saiz fon pada elemen induk. Mari kita lihat ini dalam tindakan dalam demo codepen:

Lihat pena menggunakan EMS untuk komponen yang boleh disesuaikan oleh SitePoint (@SitePoint) pada codepen.

Modul kecil yang bodoh ini mempunyai empat elemen asas di dalamnya. Tidak ada yang mewah, hanya satu contoh untuk menggambarkan teknik ini. Gerakkan gelangsar jarak di bahagian atas halaman demo untuk menukar saiz modul. Anda juga boleh mengujinya pada skrin penuh. Slider julat disambungkan ke satu nilai pada elemen akar untuk komponen: nilai saiz font. Harus diingat di sini bahawa tujuan membuat komponen yang boleh disusun semula menggunakan harta CSS tunggal ini tidak semestinya supaya pengguna dapat melakukan ini. Ini terutamanya supaya pemaju mengekalkan modul boleh membuat pelarasan dengan cepat, tanpa mengutamakan nilai -nilai yang berbeza di semua bahagian komponen. Seperti yang diterangkan dalam bahagian sebelumnya, apabila saiz fon berubah, ini mengalir ke semua nilai EM yang ditetapkan pada elemen induk itu serta kepada semua elemen anaknya, menjadikan semua bahagian komponen secara fleksibel. Jika anda memeriksa CSS, anda akan melihat perkara berikut:

• Segala -galanya di dalam komponen bersaiz dengan EMS, kecuali sempadan luar (yang kita mahu kekal pada 2px pada setiap masa), dan imej, yang saya dapat mengubah saiznya jika kita mahu, tetapi saya gembira dengan saiznya statik untuk kes ini.
• perkara seperti air mata di sudut kanan atas adalah elemen pseudo, yang juga mendapat manfaat dari saiz font asas pada ibu bapa.
• CSS juga termasuk dua pertanyaan media yang menyesuaikan saiz font pada ibu bapa. Sekali lagi, ini menunjukkan kegunaan teknik ini kerana anda tidak perlu mengubah semua saiz dalam pertanyaan media, tetapi hanya saiz font.

beberapa nota, kelemahan, dan lain -lain

Seperti yang anda dapat lihat daripada menggunakan slider julat dalam demo, jenis saiz semula fleksibel ini tidak semestinya sesuatu yang anda mahu gunakan. Ia boleh menjadi agak menyekat. Anda mungkin perlu mengubah beberapa nilai EM untuk mendapatkannya bagaimana anda suka, dan, seperti dalam kes sempadan induk dalam demo, anda mungkin tidak mahu kemampuan saiz semula untuk memohon kepada semua elemen. Anda boleh mengatasinya dengan mudah dengan hanya mengelakkan EMS pada unsur -unsur yang anda mahu tinggalkan. Seperti yang diterangkan dalam perbincangan mengenai artikel asal Simurai, anda tidak perlu menggunakan unit PX untuk menetapkan saiz font root. Anda juga boleh menggunakan EMS untuk itu, tetapi ingatlah bahawa ini akan diwarisi dengan cara yang sama dari ibu bapanya, mungkin datang dari nilai lalai dokumen untuk saiz font.

bagaimana dengan REMS dan SASS?

Unit REM dalam CSS sentiasa mewarisi nilainya dari tetapan saiz fon asas pada elemen akar dokumen, tanpa mengira saiz fon yang dikira. Dalam HTML, elemen akar sentiasa elemen HTML. Jadi, anda boleh menggunakan REMS, tetapi ini bermakna anda perlu mengawal semua komponen pada halaman menggunakan saiz fon pada elemen tersebut. Ia boleh berfungsi pada projek -projek tertentu, tetapi saya fikir teknik ini berfungsi dengan baik apabila memfokuskan kebolehpercayaan pada komponen terpencil, dan bukannya seluruh dokumen. Bagi menggunakan preprocessor seperti sass, saya fikir itu titik sampingan. Akhirnya, lembaran gaya anda yang disusun akan menggunakan unit apa sahaja yang anda gunakan dalam kod SASS anda, dan warisan akan berfungsi dengan cara yang sama.

Kesimpulan

Seperti yang telah disebutkan, Simurai layak mendapat kredit untuk membuat teknik ini lebih dikenali. Sudah tentu, seperti yang dia sebutkan, ini bukan sesuatu yang baru dan konsep asas telah digunakan oleh banyak pemaju berpengalaman selama bertahun -tahun - tetapi mungkin tidak begitu banyak dalam konteks komponen web, atau modul. Seperti yang dikatakan Simurai, saya fikir ini adalah kaedah yang bagus untuk digunakan apabila membina kerangka CSS atau perpustakaan komponen, dan, jika tidak ada yang lain, saya fikir teknik itu benar -benar memacu di rumah tentang bagaimana unit EM yang kuat. Em bukan satu -satunya unit CSS yang tersedia, tentu saja. Semak gambaran keseluruhan unit saiz CSS kami.

Soalan Lazim (Soalan Lazim) Mengenai Unit EM dalam CSS

Apakah perbezaan antara unit EM dan REM dalam CSS? EM adalah relatif kepada saiz fon ibu bapa terdekatnya, atau elemen semasa. Ini bermakna jika anda menetapkan saiz fon elemen kepada 1.2EM, ia akan menjadi 1.2 kali saiz saiz fon ibu bapa. Sebaliknya, REM adalah relatif kepada akar, atau elemen HTML. Oleh itu, jika anda menetapkan saiz fon elemen kepada 1.2rem, ia akan menjadi 1.2 kali saiz saiz fon unsur akar. Ini menjadikan REM lebih diramalkan dan lebih mudah dikawal daripada em.

Bagaimana saya menukar piksel ke unit EM dalam CSS?

Untuk menukar piksel ke unit EM, anda perlu mengetahui saiz font asas dokumen anda. Saiz font asas lalai dalam kebanyakan penyemak imbas ialah 16px. Oleh itu, jika anda ingin menukar nilai piksel ke EM, anda membahagikan nilai piksel dengan saiz font asas. Sebagai contoh, jika anda ingin menukar 18px ke EM, anda akan melakukan 18/16 = 1.125em. Mereka berskala, bermakna mereka menyesuaikan berdasarkan tetapan penyemak imbas lalai pengguna atau tetapan peranti mereka. Ini menjadikan laman web anda lebih mudah diakses oleh pengguna dengan kecacatan visual yang mungkin perlu meningkatkan saiz fon. Unit EM juga membolehkan reka bentuk yang lebih fleksibel dan responsif, kerana ia menyesuaikan berdasarkan saiz fon elemen induk. Ini termasuk sifat seperti lebar, ketinggian, padding, margin, dan ketinggian garis. Menggunakan unit EM untuk sifat-sifat ini dapat membantu mengekalkan hubungan berkadar dalam reka bentuk anda. Sebagai contoh, jika anda mahu saiz font asas menjadi 18px, anda akan menulis: html {font-size: 18px; }. Semua unit EM di CSS anda akan menjadi relatif kepada saiz font asas ini. Ini boleh membawa kepada kesan pengkompaunan, di mana saiz elemen kanak -kanak menjadi lebih besar atau lebih kecil daripada yang dijangkakan. Untuk mengelakkan ini, anda boleh menggunakan unit REM, yang selalu relatif kepada saiz elemen akar. Kerana unit EM adalah relatif, saiz sebenar mereka boleh berubah berdasarkan konteksnya. Ini boleh menjadikannya lebih sukar untuk meramalkan saiz unsur -unsur, terutamanya dalam susun atur yang kompleks dengan unsur -unsur bersarang. CSS mengikuti hierarki kekhususan, di mana pemilih yang lebih spesifik mengatasi yang kurang spesifik. Sebagai contoh, pemilih ID akan menimpa pemilih kelas, dan pemilih kelas akan menimpa pemilih jenis.

Bolehkah saya menggunakan unit EM dalam pertanyaan media dalam CSS?

Ya, anda boleh menggunakan unit EM dalam pertanyaan media. Malah, menggunakan unit EM dalam pertanyaan media boleh meningkatkan respons reka bentuk anda. Kerana unit EM adalah relatif, mereka menyesuaikan berdasarkan tetapan penyemak imbas lalai pengguna atau tetapan peranti mereka. Ini bermakna pertanyaan media anda akan menyesuaikan diri dengan tetapan pengguna, bukan hanya saiz paparan. Sebagai contoh, jika saiz elemen induk adalah 1.5EM dan saiz elemen kanak -kanak adalah 2EM, saiz sebenar elemen kanak -kanak ialah 1.5 * 2 = 3EM. Ini kerana saiz elemen kanak -kanak adalah relatif kepada saiz elemen induk.

Atas ialah kandungan terperinci Kekuatan unit EM di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!