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

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

為什么使用calc() ？

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

例如：

寬度：計算（100％-20px）;

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

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

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

您可以做這樣的事情：

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

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

一些要點(diǎn)：

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

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

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

這是一個例子：

字體大?。篶alc（16px 2vw）;

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

尖端：

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

將calc()與CSS變量組合

使用自定義屬性（CSS變量）使用calc()打開更具動態(tài)的可能性。例如，您可以在整個布局中定義一次間距值，然后在計算中使用它們。

例子：

 ：根 {
   - 間距：20px;
}

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

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

要記住的一些事情：

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

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

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