Apakah unit baharu yang ditambahkan dalam css3-Soal Jawab bahagian hadapan-php.cn

Apakah unit baharu yang ditambahkan dalam css3

青灯夜游

Lepaskan： 2022-01-12 17:17:07

asal

2105 orang telah melayarinya

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>

Salin selepas log masuk

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!