使用純 CSS 取得螢幕尺寸

我們都知道 CSS 曾經是 Web 開發中最具挑戰性的部分。然而，現在變得更加困難了。

你可能不會相信，現在 CSS 可以定義屬性、進行數學運算，甚至可以直接取得螢幕尺寸！本文將向您展示如何做到這一點。

定義屬性

@property 規則是 CSS 中的一項新功能，可讓開發人員建立自訂屬性並設定其類型、繼承和初始值。使用此功能，我們可以讀取特定值並將其傳遞給自訂屬性。

在下面的例子中，我們定義了兩個自訂屬性，--w_raw和--h_raw，分別代表螢幕的寬度和高度：

@property --w_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}

@property --h_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

• 語法：''指定屬性的類型是長度。
• 繼承：true表示該屬性可以繼承。
• initial-value 將屬性的初始值設為 100vw 和 100vh，即視口的寬度和高度。

移除單位

現在，我們已經獲得了螢幕的寬度和高度值，但它們仍然包含單位。我們如何去除單位以獲得純數值？這是一個數學問題，所以我們需要使用 CSS 中的數學工具：atan2(y, x) 和 tan()。

• atan2(y, x) 函數傳回從 x 軸到點 (x, y) 的角度（以弧度為單位）。
• tan() 函數計算給定角度的正切。

結合這些，我們可以得到純數值。這裡，我們傳遞 var(--w_raw) 和 1px 作為參數來計算寬度的角度，然後將其轉換為數字。這樣，我們將寬度和高度轉換為無單位值並將它們儲存在 :root 的變數中。

:root {
  --w: tan(atan2(var(--w_raw), 1px));
  --h: tan(atan2(var(--h_raw), 1px));
}

顯示數字

既然數值儲存在CSS中，我們要如何顯示它們呢？重要的是計數器！

body::before {
  content: counter(w) 'x' counter(h);
  counter-reset: h var(--h) w var(--w);
}

我們在 body 上建立一個 ::before 偽元素來顯示 CSS 內容。

• counter-reset 初始化計數器 h 和 w 並將其值設為 var(--h) 和 var(--w)。
• 內容：計數器（w）“x”計數器（h）；顯示寬度和高度計數器，格式為“寬度 x 高度”。

完畢！

現在您已經純粹在CSS中實現了螢幕尺寸指示器。

瀏覽器會即時更新--w和--h並顯示在頁面上。整個過程完全不需要 JavaScript。

您可以點擊此處嘗試線上示範。

以上是使用純 CSS 取得螢幕尺寸的詳細內容。更多資訊請關注PHP中文網其他相關文章！