Cara menggunakan unit panjang baharu dalam css3

Penggunaan: 1. em mewakili saiz fon berbanding teks dalam objek semasa 2. rem mewakili saiz fon berbanding unsur akar 3. ch mewakili saiz nombor 4; vh mewakili paparan peratusan Ketinggian tetingkap; 5. vw mewakili lebar port pandangan dalam peratusan;

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

Cara menggunakan unit panjang baharu dalam css3

Unit panjang baharu dalam css3 ialah:

• em: relatif kepada teks dalam semasa objek Saiz fon. Saiz fon berbanding nod induk

• rem: Saiz fon berbanding elemen akar . Senario aplikasi: Reka letak ditentukan oleh kandungan teks.

• vh dan vv: 1vh bersamaan dengan 1/100 ketinggian port pandangan ① dan 1vw bersamaan dengan 1/100 lebar port pandangan.

• vmin dan vmax: Mengenai nilai minimum atau maksimum ketinggian dan lebar port pandangan, vmin adalah sama dengan nilai minimum 1/100 daripada lebar dan ketinggian port pandangan. Senario aplikasi: Jadikan elemen sentiasa kelihatan pada skrin.

• ch: lebar nombor 0

• cth: ketinggian huruf kecil x huruf fon semasa atau 1/2 daripada 1em②. Senario aplikasi: Superskrip dan subskrip

ch -- lebar aksara 0 (sifar)

rem -- fon- unsur akar (elemen html) Apakah saiz

maksudnya?

Contohnya, jika saiz fon html elemen akar ialah 100px, maka tetapan rem bagi unsur-unsur di bawah elemen akar semuanya ialah 1rem = 100px. Nilai awal

rem ialah 16px, yang bermaksud bahawa apabila saiz fon nod akar tidak ditetapkan, 1rem = 16px

Ingat, ia adalah relatif kepada elemen akar html. Jika badan ditetapkan, maka Tidak akan berfungsi

Ingat: vw dan vh hanya relatif kepada kawasan yang boleh dilihat penyemak imbas, iaitu window.innerHeight, window.innerWidth

vw -- kawasan boleh dilihat penyemak imbas, 1vw adalah bersamaan dengan 1% daripada lebar kawasan boleh dilihat penyemak imbas

vh -- kawasan boleh dilihat penyemak imbas, 1vh adalah sama dengan 1% daripada ketinggian kawasan kelihatan penyemak imbas

vmin -- yang lebih kecil bagi vw dan vh Yang satu

vmax -- yang lebih besar antara vw dan vh

Contohnya, jika lebar/tinggi penyemak imbas ditetapkan kepada 1000px/600px

kemudian,

2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px

(Belajar perkongsian video: tutorial video css)

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