在現代前端開發中，獲取屏幕的寬度和高度通常依賴于 JavaScript。然而現代 CSS 也可以獲取到屏幕的寬高，通過自定義屬性（CSS Variables）和一些數學函數來實現這一目標。本文將詳細解析如何使用 CSS 的 @property 規則和一些數學運算來獲取屏幕的寬高，嚴格的說是獲取視口的寬度和高度。

使用CSS獲取屏幕寬高僅是一種實現方式，部分屬性和數學函數有一定的兼容性問題，所以線上環境使用需謹慎。首先來了解一些前置知識點：

1. CSS 自定義屬性

CSS 自定義屬性（也稱為 CSS 變量）允許開發者在 CSS 中定義可重用的值。通過使用 var() 函數，可以在樣式表的任何地方引用這些變量。自定義屬性的定義通常在 :root 選擇器中進行，以便在整個文檔中使用。

:root {
    --shadow-hue: 180deg;
    --spring-duration: 1.33s;
    --canvas: 220;
    --bg: hsl(var(--canvas), 15%, 22%);
    --wgt: 200;
}

2. @property 規則

@property 規則是 CSS 的一項新特性，允許開發者定義自定義屬性的語法、繼承性和初始值。通過 @property，我們可以指定一個屬性的類型和默認值。

在我們的示例中，我們定義了兩個自定義屬性 --_w 和 --_h，分別表示屏幕的寬度和高度：

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

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

• syntax: '<length>' 指定了屬性的類型為長度。
• inherits: true 表示該屬性可以繼承。
• initial-value 設置了屬性的初始值，分別為 100vw 和 100vh，即視口的寬度和高度。

3. 數學運算函數

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

4. 計算屏幕寬高

在 :root 選擇器中，我們使用 tan() 和 atan2() 函數來計算屏幕的寬度和高度，在這里我們將 var(--_w) 和 1px 作為參數傳遞，計算出寬度的角度。通過這種方式，我們可以將寬度和高度轉換為無單位的整數值。

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

5. 使用 counter 顯示寬高

在 body:before 偽元素中，我們使用 counter 來顯示計算出的寬度和高度：

body:before {
  content: counter(w) "x" counter(h);
  counter-reset: h var(--h) w var(--w);
  font-size: 50px;
  font-family: system-ui, sans-serif;
  font-weight: 900;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}

• counter-reset 用于初始化計數器 h 和 w，并將其值設置為 var(--h) 和 var(--w)。
• content: counter(w) "x" counter(h); 用于顯示寬度和高度，格式為 寬度 x 高度。
• 通過設置 position: fixed 和 inset: 0，我們將內容居中顯示在屏幕上。

6. 效果展示

當頁面加載時，瀏覽器會根據視口的實際寬度和高度計算出 --w 和 --h 的值，并在頁面上顯示出來。整個過程完全不依賴于 JavaScript。

圖片

7. 總結

通過使用 CSS 的 @property 規則和數學函數，我們可以在不使用 JavaScript 的情況下獲取屏幕的寬度和高度。隨著 CSS 規范的不斷發展，未來可能會有更多類似的功能，使得前端開發更加靈活和高效。

雖然CSS提供了強大的功能，但在不使用JavaScript的情況下獲取屏幕尺寸仍然存在限制，如瀏覽器兼容問題。CSS自定義屬性和計數器可以用于創造性的解決方案，但在某些情況下，JavaScript仍然是必要的。開發者應該根據項目的具體需求和環境來選擇最合適的方法。