|
Sebagian besar desainer domestik suka menggunakan px, sementara sebagian besar situs web asing suka menggunakan em dan rem, jadi apa perbedaan antara ketiganya, dan apa kelebihan dan kekurangan masing-masing? Mari kita beri Anda pengenalan terperinci. Fitur PX: 1. IE tidak dapat menyesuaikan ukuran font dari mereka yang menggunakan px sebagai satuan; 2. Alasan mengapa sebagian besar situs web asing dapat disesuaikan adalah karena mereka menggunakan em atau rem sebagai unit font; 3. Firefox dapat menyesuaikan px, em, dan rem, tetapi lebih dari 96% netizen China menggunakan browser (atau kernel) IE. piksel px. Satuan panjang relatif. Pixel px relatif terhadap resolusi layar monitor. (Dikutip dari manual CSS2.0) em adalah satuan panjang relatif. Ukuran font relatif terhadap teks dalam objek saat ini. Jika ukuran font teks dalam baris tidak diatur secara artifisial, itu akan relatif terhadap ukuran font default browser. (Dikutip dari manual CSS2.0) Tinggi font default untuk browser apa pun adalah 16px. Semua browser yang tidak disesuaikan mematuhi: 1em = 16px. Kemudian 12px=0.75em, 10px=0.625em. Untuk menyederhanakan konversi font-size, Anda perlu mendeklarasikan font-size=62.5% di pemilih isi di css, yang membuat nilai em 16px*62.5%=10px, sehingga 12px=1.2em, 10px=1em, yang berarti Anda hanya perlu membagi nilai px asli Anda dengan 10, dan kemudian menggantinya dengan em sebagai satuan. Fitur EM: 1. Nilai em tidak tetap; 2. em mewarisi ukuran font elemen induk. Jadi ketika kita menulis CSS, kita perlu memperhatikan dua hal: 1. Deklarasikan font-size=62.5% di pemilih isi; 2. Bagi nilai px asli Anda dengan 10 dan ganti dengan em sebagai satuan; 3. Hitung ulang nilai em dari font yang diperbesar tersebut. Hindari deklarasi ukuran font berulang. Artinya, untuk menghindari fenomena 1,2 * 1,2 = 1,44. Misalnya, jika Anda mendeklarasikan ukuran font 1.2em dalam #content, maka saat mendeklarasikan ukuran font p, itu hanya bisa 1em, bukan 1.2em, karena em ini bukan em itu, dan menjadi 1em=12px karena mewarisi tinggi font #content. Fitur REM rem adalah unit relatif baru (root em) yang ditambahkan ke CSS3, yang telah menarik banyak perhatian. Apa perbedaan antara unit ini dan em? Perbedaannya adalah ketika Anda menggunakan rem untuk mengatur ukuran font untuk suatu elemen, itu masih ukuran relatif, tetapi relatifnya hanya elemen root HTML. Unit ini dapat dikatakan menggabungkan keunggulan ukuran relatif dan ukuran absolut, di mana ia tidak hanya dapat memodifikasi elemen akar untuk menyesuaikan semua ukuran font secara proporsional, tetapi juga menghindari reaksi berantai dari peracikan ukuran font lapis demi lapis. Saat ini, rem didukung di semua browser kecuali IE8 dan sebelumnya. Untuk browser yang tidak mendukungnya, responsnya juga sangat sederhana, yaitu menulis pernyataan unit absolut. Browser ini mengabaikan ukuran font yang ditetapkan dengan rem. Berikut contohnya: p {font-size:14px; ukuran font: .875rem; } Nota:Pilihan unit font sebagian besar terserah proyek Anda, dan jika basis pengguna Anda menggunakan browser versi terbaru, maka REM direkomendasikan, jika kompatibilitas menjadi perhatian, maka gunakan px, atau keduanya. Berikut adalah alamat alat konversi unit px, em, rem:http://pxtoem.com/
| 
Diposting pada 21/03/2017 09.31.50
|
|
|
