dk域名網(wǎng)站全搜網(wǎng)
前言
在現(xiàn)代前端開發(fā)中，獲取屏幕的寬度和高度通常依賴于 JavaScript。然而現(xiàn)代 CSS 也可以獲取到屏幕的寬高，通過自定義屬性（CSS Variables）和一些數(shù)學(xué)函數(shù)來實(shí)現(xiàn)這一目標(biāo)。本文將詳細(xì)解析如何使用 CSS 的 @property 規(guī)則和一些數(shù)學(xué)運(yùn)算來獲取屏幕的寬高，嚴(yán)格的說是獲取視口的寬度和高度。
使用CSS獲取屏幕寬高僅是一種實(shí)現(xiàn)方式，部分屬性和數(shù)學(xué)函數(shù)有一定的兼容性問題，所以線上環(huán)境使用需謹(jǐn)慎。首先來了解一些前置知識(shí)點(diǎn)：
1. CSS 自定義屬性
CSS 自定義屬性（也稱為 CSS 變量）允許開發(fā)者在 CSS 中定義可重用的值。通過使用 var() 函數(shù)，可以在樣式表的任何地方引用這些變量。自定義屬性的定義通常在 :root 選擇器中進(jìn)行，以便在整個(gè)文檔中使用。
:root {--shadow-hue: 180deg;--spring-duration: 1.33s;--canvas: 220;--bg: hsl(var(--canvas), 15%, 22%);--wgt: 200;
}
2. @property 規(guī)則
@property 規(guī)則是 CSS 的一項(xiàng)新特性，允許開發(fā)者定義自定義屬性的語法、繼承性和初始值。通過 @property，我們可以指定一個(gè)屬性的類型和默認(rèn)值。
在我們的示例中，我們定義了兩個(gè)自定義屬性 --_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 設(shè)置了屬性的初始值，分別為 100vw 和 100vh，即視口的寬度和高度。
3. 數(shù)學(xué)運(yùn)算函數(shù)
atan2(y, x) 函數(shù)返回從 x 軸到點(diǎn) (x, y) 的角度（以弧度為單位）。
tan() 函數(shù)則計(jì)算給定角度的正切值。
4. 計(jì)算屏幕寬高
在 :root 選擇器中，我們使用 tan() 和 atan2() 函數(shù)來計(jì)算屏幕的寬度和高度，在這里我們將 var(–_w) 和 1px 作為參數(shù)傳遞，計(jì)算出寬度的角度。通過這種方式，我們可以將寬度和高度轉(zhuǎn)換為無單位的整數(shù)值。
:root {--w: tan(atan2(var(--_w), 1px));--h: tan(atan2(var(--_h), 1px));
}
- 使用 counter 顯示寬高
在 body:before 偽元素中，我們使用 counter 來顯示計(jì)算出的寬度和高度：
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 用于初始化計(jì)數(shù)器 h 和 w，并將其值設(shè)置為 var(–h) 和 var(–w)。
content: counter(w) “x” counter(h); 用于顯示寬度和高度，格式為 寬度 x 高度。
通過設(shè)置 position: fixed 和 inset: 0，我們將內(nèi)容居中顯示在屏幕上。
6. 效果展示
當(dāng)頁面加載時(shí)，瀏覽器會(huì)根據(jù)視口的實(shí)際寬度和高度計(jì)算出 –w 和 –h 的值，并在頁面上顯示出來。整個(gè)過程完全不依賴于 JavaScript。
7. 總結(jié)
通過使用 CSS 的 @property 規(guī)則和數(shù)學(xué)函數(shù)，我們可以在不使用 JavaScript 的情況下獲取屏幕的寬度和高度。隨著 CSS 規(guī)范的不斷發(fā)展，未來可能會(huì)有更多類似的功能，使得前端開發(fā)更加靈活和高效。
雖然CSS提供了強(qiáng)大的功能，但在不使用JavaScript的情況下獲取屏幕尺寸仍然存在限制，如瀏覽器兼容問題。CSS自定義屬性和計(jì)數(shù)器可以用于創(chuàng)造性的解決方案，但在某些情況下，JavaScript仍然是必要的。開發(fā)者應(yīng)該根據(jù)項(xiàng)目的具體需求和環(huán)境來選擇最合適的方法。