如何在不使用'max”函數的情況下計算 CSS 中的最大寬度？

計算CSS 中的最大寬度

在CSS 中，目前無法使用以下方法直接計算最大寬度作為其他值的函數最大函數。嘗試使用max-width: calc(max(500px, 100% - 80px)) 或max-width: max(500px, calc(100% - 80px))) 之類的結構來執行此操作將不會產生所需的結果。

使用媒體查詢的CSS 解決方案

但是，使用媒體查詢可以實現類似的效果：

<code class="css">.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}</code>

在此範例中， .您的選擇器元素將具有基於視窗大小的最大寬度。當視窗寬度超過 500px 時，最大寬度將設定為視口寬度與 80px 之間的差值。然而，當視窗為 500px 或更窄時，最大寬度將明確設定為 500px。

這種方法有效地使用媒體查詢根據螢幕尺寸動態計算最大寬度，從而模仿所需的功能以受限方式使用 max 函數。

以上是如何在不使用'max”函數的情況下計算 CSS 中的最大寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！