我們都知道 CSS 曾經是 Web 開發中最具挑戰性的部分。然而,現在變得更加困難了。
你可能不會相信,現在 CSS 可以定義屬性、進行數學運算,甚至可以直接取得螢幕尺寸!本文將向您展示如何做到這一點。
@property 規則是 CSS 中的一項新功能,可讓開發人員建立自訂屬性並設定其類型、繼承和初始值。使用此功能,我們可以讀取特定值並將其傳遞給自訂屬性。
在下面的例子中,我們定義了兩個自訂屬性,--w_raw和--h_raw,分別代表螢幕的寬度和高度:
@property --w_raw { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --h_raw { syntax: '<length>'; inherits: true; initial-value: 100vh; }
現在,我們已經獲得了螢幕的寬度和高度值,但它們仍然包含單位。我們如何去除單位以獲得純數值?這是一個數學問題,所以我們需要使用 CSS 中的數學工具:atan2(y, x) 和 tan()。
結合這些,我們可以得到純數值。這裡,我們傳遞 var(--w_raw) 和 1px 作為參數來計算寬度的角度,然後將其轉換為數字。這樣,我們將寬度和高度轉換為無單位值並將它們儲存在 :root 的變數中。
:root { --w: tan(atan2(var(--w_raw), 1px)); --h: tan(atan2(var(--h_raw), 1px)); }
既然數值儲存在CSS中,我們要如何顯示它們呢?重要的是計數器!
body::before { content: counter(w) 'x' counter(h); counter-reset: h var(--h) w var(--w); }
我們在 body 上建立一個 ::before 偽元素來顯示 CSS 內容。
現在您已經純粹在CSS中實現了螢幕尺寸指示器。
瀏覽器會即時更新--w和--h並顯示在頁面上。整個過程完全不需要 JavaScript。
您可以點擊此處嘗試線上示範。
以上是使用純 CSS 取得螢幕尺寸的詳細內容。更多資訊請關注PHP中文網其他相關文章!