CSS calc（）函數(shù)允許通過(guò)在樣式表中執(zhí)行數(shù)學(xué)操作來(lái)對(duì)網(wǎng)頁(yè)元素進(jìn)行動(dòng)態(tài)大小。它可以通過(guò)混合％，PX，EM和REM等單元來(lái)實(shí)現(xiàn)靈活性，並重新估算值。 1。這對(duì)於響應(yīng)式佈局很有用，例如通過(guò)間距調(diào)整設(shè)置寬度：寬度：calc（100％-20px）;。 2。通過(guò)考慮邊距和填充物，有助於維持網(wǎng)格或Flexbox佈局的動(dòng)態(tài)差距。 3。它支持流體版式，例如字體大?。篶alc（16px 2vw）；允許無(wú)需介質(zhì)查詢的可伸縮文本。 4。與CSS變量結(jié)合使用時(shí)，它可以促進(jìn)可重複使用和可維護(hù)的代碼，例如：填充：calc（var（ - spacing） * 2）;。關(guān)鍵技巧包括使用操作員周圍的空間，避免過(guò)度複雜的表達(dá)式以及跨設(shè)備測(cè)試以獲得最佳結(jié)果。

當(dāng)您在網(wǎng)頁(yè)上需要元素以基於其他值動(dòng)態(tài)大小時(shí)，CSS calc()函數(shù)是一個(gè)強(qiáng)大的工具。它使您可以在樣式表中執(zhí)行數(shù)學(xué)操作，從而使創(chuàng)建靈活和響應(yīng)的佈局更容易，而不僅僅是僅依靠JavaScript或固定尺寸。

為什麼使用calc() ？

calc()的主要優(yōu)勢(shì)是靈活性。您可以混合不同的單元（例如百分比，像素，EMS，REMS），並可以重新估算值。這使得它適合您需要基於其他已知值的間距，寬度，高度或字體大小來(lái)調(diào)整的情況。

例如：

寬度：計(jì)算（100％-20px）;

這條線告訴瀏覽器將容器的完整寬度佔(zhàn)據(jù)，並減去20個(gè)像素 - 在考慮填充或邊界而不更改框模型時(shí)很有用。

響應(yīng)迅速的佈局和動(dòng)態(tài)差距

一種常見(jiàn)的用例是創(chuàng)建佈局，以在調(diào)整到屏幕尺寸的同時(shí)保持元素之間的間距。想像一個(gè)網(wǎng)格，每列的寬度應(yīng)為30％，但每側(cè)也有5％的邊距。

您可以做這樣的事情：

 。柱子 {
  寬度：計(jì)算（30％-10％）；
}

或者，如果您使用的是Flexbox並想要避免使用負(fù)邊距， calc()可以通過(guò)直接在容器上調(diào)整填充或邊距來(lái)幫助設(shè)置一致的間距。

一些要點(diǎn)：

• 您可以自由地混合% ， px ， em ， rem等單元。
• 始終包含圍繞操作員的空間（ ， - ， ETC。 ）。
• 它在所有現(xiàn)代瀏覽器中得到了支持。

字體尺寸與視口相擴(kuò)展

calc()的另一個(gè)巧妙用途是用於流體版式 - 使字體大小在屏幕大小的情況下平滑適應(yīng)最小值和最大值。

這是一個(gè)例子：

字體大小：calc（16px 2vw）;

這意味著字體將始終至少為16px，但隨著視圖變得更寬，字體也會(huì)略有生長(zhǎng)。它可以避免在大屏幕上看起來(lái)太小的文本，而無(wú)需為每種尺寸變化而需要媒體查詢。

尖端：

• 從像素的基本大小開(kāi)始。
• 添加或減去相對(duì)單位，例如vw或vh 。
• 測(cè)試它在跨設(shè)備之間的表現(xiàn)。

將calc()與CSS變量組合

使用自定義屬性（CSS變量）使用calc()打開(kāi)更具動(dòng)態(tài)的可能性。例如，您可以在整個(gè)佈局中定義一次間距值，然後在計(jì)算中使用它們。

例子：

 ：根 {
   - 間距：20px;
}

。容器 {
  填充：calc（var（ - 間距） * 2）;
}

這樣可以使您的代碼乾燥，並使全局更改變得更加容易。如果更新--spacing ，則在計(jì)算中使用它的所有內(nèi)容會(huì)自動(dòng)更新。

要記住的一些事情：

• 允許在另一個(gè)calc()內(nèi)進(jìn)行嵌套calc() 。
• 不要忘記數(shù)學(xué)操作員周圍的空間。
• 避免過(guò)於復(fù)雜的表情；他們很難閱讀。

這基本上就是您需要有效地使用calc()開(kāi)始的。它並不復(fù)雜，但確實(shí)需要注意語(yǔ)法和跨設(shè)備測(cè)試。但是，一旦習(xí)慣了它，它將成為您經(jīng)常獲得的工具之一。

以上是利用CSS calc（）函數(shù)進(jìn)行動(dòng)態(tài)尺寸的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！