Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah unit baharu yang ditambahkan dalam css3

Apakah unit baharu yang ditambahkan dalam css3

青灯夜游
青灯夜游asal
2022-01-12 17:17:072211semak imbas

Unit baharu ditambahkan dalam css3: 1. "ch", lebar aksara 0; 2. "rem", unit relatif, terutamanya relatif kepada saiz fon elemen akar; , Lebar tetingkap 4. "vh", ketinggian tetingkap; 5. "vmin";

Apakah unit baharu yang ditambahkan dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Unit panjang baharu dalam CSS3

Unit panjang baharu dalam CSS3 adalah seperti berikut,

  • ch, lebar aksara 0

  • rem, ialah unit relatif, terutamanya relatif kepada saiz fon elemen akar Apabila menggunakan rem, kita perlu merujuk kepada elemen akar yang ditentukan.

  • vw, lebar sudut pandangan, lebar tingkap, 1vw=1% lebar tingkap

  • vh, tinggi sudut pandangan, tingkap ketinggian , 1vh=1% daripada ketinggian tingkap

  • vmin, vmax, dsb.

Berkaitan sudut pandangan yang baru ditambah unit biasanya untuk peranti mudah alih.

rem sebenarnya adalah perkara yang sama seperti em, kecuali rem mempunyai sekatan tambahan, yang mewakili saiz fon unsur akar (unsur html). Kita boleh melihat perbezaan antara

rem dan em melalui contoh berikut,

<html style="font-size: 12px;">
<body>
    <div id="div1" style="font-size: 16px">
        <div id="div2" style="font-size: 1.2em"></div>
        <div id="div3" style="font-size: 1.2rem">
            <div id="div4" style="font-size: 1.2em"></div>
        </div>
    </div>
</body>
</html>

Pada masa ini,

  • saiz fon div2: 16px*1.2em=19.2px

  • saiz fon div3: 12px*1.2rem=14.4px

  • saiz fon div4: 12px*1.2rem*1.2em=17.28px

Dapat dilihat bahawa rem tidak mempunyai hubungan yang melata, tetapi em ada.

Perlu diperhatikan bahawa IE8 dan ke bawah, Safari 4, IOS 3.2, dll. tidak menyokong unit rem.

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah unit baharu yang ditambahkan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Apakah kelebihan h5 dan css3Artikel seterusnya:Apakah kelebihan h5 dan css3