Fungsi CSS Calc () membolehkan saiz dinamik unsur -unsur laman web dengan melakukan operasi matematik dalam gaya. Ia membolehkan fleksibiliti dengan mencampurkan unit seperti %, PX, EM, dan REM, dan mengira semula nilai dengan cepat. 1. Ia berguna untuk susun atur responsif, seperti menetapkan lebar dengan pelarasan jarak: Lebar: Calc (100% - 20px);. 2. Ia membantu mengekalkan jurang dinamik dalam grid atau susun atur flexbox dengan pemfaktoran dalam margin dan padding. 3. Ia menyokong tipografi cecair, seperti saiz font: calc (16px 2vw);, membenarkan teks berskala tanpa pertanyaan media. 4. Apabila digabungkan dengan pembolehubah CSS, ia menggalakkan kod yang boleh diguna semula dan dikekalkan, contohnya: padding: calc (var (-jarak) * 2);. Petua utama termasuk menggunakan ruang di sekitar pengendali, mengelakkan ekspresi yang terlalu kompleks, dan ujian merentasi peranti untuk hasil yang optimum.

Apabila anda memerlukan unsur -unsur di laman web anda untuk mengukur sendiri secara dinamik berdasarkan nilai lain, fungsi CSS calc() adalah alat yang berkuasa. Ia membolehkan anda melakukan operasi matematik tepat di dalam stylesheets anda, menjadikannya lebih mudah untuk membuat susun atur yang fleksibel dan responsif tanpa bergantung semata -mata pada JavaScript atau saiz tetap.

Mengapa menggunakan calc() ?

Manfaat utama calc() adalah fleksibiliti. Anda boleh mencampurkan unit yang berbeza (seperti peratusan, piksel, EMS, REMS), dan ia mengira semula nilai dengan cepat. Ini menjadikannya sesuai untuk situasi di mana anda mahu jarak, lebar, ketinggian, atau saiz fon untuk menyesuaikan berdasarkan nilai yang diketahui lain.

Contohnya:

 lebar: calc (100% - 20px);

Barisan ini memberitahu penyemak imbas untuk mengambil lebar penuh bekas dan tolak 20 piksel - berguna apabila menyumbang padding atau sempadan tanpa mengubah model kotak.

Susun atur responsif dengan jurang yang dinamik

Satu kes penggunaan biasa ialah membuat susun atur yang mengekalkan jarak antara unsur -unsur semasa menyesuaikan diri dengan saiz skrin. Bayangkan grid di mana setiap lajur harus lebar 30%, tetapi juga mempunyai margin 5% di setiap sisi.

Anda boleh melakukan sesuatu seperti ini:

 .column {
  lebar: calc (30% - 10%);
}

Atau jika anda menggunakan Flexbox dan ingin mengelakkan margin negatif, calc() boleh membantu menetapkan jarak yang konsisten dengan menyesuaikan padding atau margin secara langsung pada bekas.

Beberapa perkara utama:

• Anda boleh mencampur unit seperti % , px , em , rem secara bebas.
• Sentiasa sertakan ruang di sekitar pengendali ( , - , dll.).
• Ia disokong dalam semua pelayar moden.

Saiz fon yang skala dengan viewport

Satu lagi penggunaan bijak calc() adalah untuk tipografi cecair - membuat saiz fon menyesuaikan dengan lancar antara nilai minimum dan maksimum seperti saiz semula skrin.

Inilah contoh:

 saiz font: calc (16px 2vw);

Ini bermakna fon akan sentiasa sekurang -kurangnya 16px, tetapi juga tumbuh sedikit apabila viewport semakin luas. Ia menghindari teks yang kelihatan terlalu kecil di skrin besar tanpa memerlukan pertanyaan media untuk setiap perubahan saiz.

Petua:

• Mulakan dengan saiz asas dalam piksel.
• Tambah atau tolak unit relatif seperti vw atau vh .
• Uji bagaimana ia berkelakuan merentasi peranti.

Menggabungkan calc() dengan pembolehubah CSS

Menggunakan calc() dengan sifat tersuai (pembolehubah CSS) membuka kemungkinan lebih dinamik. Sebagai contoh, anda mungkin menentukan nilai jarak sekali dan kemudian menggunakannya dalam pengiraan sepanjang susun atur anda.

Contoh:

 : root {
  --Spacing: 20px;
}

.container {
  padding: calc (var (-jarak) * 2);
}

Ini menjadikan kod anda kering dan menjadikan perubahan global lebih mudah. Jika anda mengemas kini --spacing , semua yang menggunakannya dalam kemas kini pengiraan secara automatik.

Beberapa perkara yang perlu diingat:

• Bersarang calc() di dalam calc() dibenarkan.
• Jangan lupa ruang di sekitar pengendali matematik.
• Mengelakkan ekspresi terlalu kompleks; Mereka boleh menjadi sukar untuk dibaca.

Itulah pada dasarnya apa yang anda perlukan untuk mula menggunakan calc() dengan berkesan. Ia tidak rumit, tetapi ia memerlukan perhatian kepada sintaks dan ujian merentasi peranti. Sebaik sahaja anda membiasakannya, ia menjadi salah satu alat yang sering anda capai.

Atas ialah kandungan terperinci Menggunakan fungsi CSS Calc () untuk ukuran dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!