不使用 JS 純 CSS 獲取屏幕寬高，你學會了嗎？
在現代前端開發中，獲取屏幕的寬度和高度通常依賴于 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仍然是必要的。開發者應該根據項目的具體需求和環境來選擇最合適的方法。
