Bagaimanakah Anda Boleh Memohon Unit pada Pembolehubah CSS Tanpa Unit?

Menyesuaikan Pembolehubah CSS Tanpa Unit dengan Unit Diingini

Dalam CSS, keupayaan untuk mentakrifkan pembolehubah tanpa unit membolehkan lebih fleksibiliti dalam penggayaan. Walau bagaimanapun, adalah perkara biasa untuk menghadapi situasi di mana pembolehubah perlu digunakan di berbilang tempat dengan unit berbeza, seperti peratusan untuk lebar dan piksel untuk operasi calc().

Memperkenalkan calc() dan Pendaraban Unit

Untuk menyelesaikannya, fungsi calc() boleh digunakan untuk menambah unit yang dikehendaki secara eksplisit pada pembolehubah. Dengan mendarab pembolehubah dengan pekali unit yang sesuai (cth., 1%), adalah mungkin untuk mencapai gelagat yang diingini.

Contoh:

Pertimbangkan senario di mana CSS pembolehubah --mywidth ditetapkan kepada 10. Untuk menggunakannya sebagai peratusan untuk lebar, mudah sahaja tulis:

div {
  width: calc(var(--mywidth) * 1%);
}

Pengiraan ini berkesan mendarab --mywidth sebanyak 1% (0.01), menghasilkan nilai lebar sebanyak 10%.

Kes Penggunaan Lanjutan:

Selain peratusan, anda boleh menggunakan teknik ini untuk menambahkan mana-mana yang dikehendaki unit:

• Untuk piksel: calc(var(--mywidth) * 1px)
• Untuk darjah: calc(var(--mywidth) * 1deg)
• Untuk kelegapan: calc(var(--mywidth) * 0.1)

Demonstrasi:

Coretan berikut menggambarkan aplikasi teknik ini:

:root {
  --a: 50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg), blue 50%, green 0);
  padding:20px;
  box-sizing:border-box;
}

Dalam contoh ini, kotak elemen menunjukkan penggunaan --a dengan unit yang berbeza, termasuk peratusan untuk lebar, piksel untuk sempadan, darjah untuk linear sudut kecerunan dan piksel untuk pelapik.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Memohon Unit pada Pembolehubah CSS Tanpa Unit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!