在現(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));
}

5. 使用 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)境來選擇最合適的方法。