dk域名網站全搜網
前言
在現代前端開發(fā)中，獲取屏幕的寬度和高度通常依賴于 JavaScript。然而現代 CSS 也可以獲取到屏幕的寬高，通過自定義屬性（CSS Variables）和一些數學函數來實現這一目標。本文將詳細解析如何使用 CSS 的 @property 規(guī)則和一些數學運算來獲取屏幕的寬高，嚴格的說是獲取視口的寬度和高度。
使用CSS獲取屏幕寬高僅是一種實現方式，部分屬性和數學函數有一定的兼容性問題，所以線上環(huán)境使用需謹慎。首先來了解一些前置知識點：
1. CSS 自定義屬性
CSS 自定義屬性（也稱為 CSS 變量）允許開發(fā)者在 CSS 中定義可重用的值。通過使用 var() 函數，可以在樣式表的任何地方引用這些變量。自定義屬性的定義通常在 :root 選擇器中進行，以便在整個文檔中使用。
:root {--shadow-hue: 180deg;--spring-duration: 1.33s;--canvas: 220;--bg: hsl(var(--canvas), 15%, 22%);--wgt: 200;
}
2. @property 規(guī)則
@property 規(guī)則是 CSS 的一項新特性，允許開發(fā)者定義自定義屬性的語法、繼承性和初始值。通過 @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));
}
- 使用 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 規(guī)則和數學函數，我們可以在不使用 JavaScript 的情況下獲取屏幕的寬度和高度。隨著 CSS 規(guī)范的不斷發(fā)展，未來可能會有更多類似的功能，使得前端開發(fā)更加靈活和高效。
雖然CSS提供了強大的功能，但在不使用JavaScript的情況下獲取屏幕尺寸仍然存在限制，如瀏覽器兼容問題。CSS自定義屬性和計數器可以用于創(chuàng)造性的解決方案，但在某些情況下，JavaScript仍然是必要的。開發(fā)者應該根據項目的具體需求和環(huán)境來選擇最合適的方法。