首頁 > web前端 > css教學 > 主體

使用純 CSS 取得螢幕尺寸

PHPz
發布: 2024-09-03 10:39:06
原創
1050 人瀏覽過

我們都知道 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;
}
登入後複製
  • 語法:''指定屬性的類型是長度。
  • 繼承:true表示該屬性可以繼承。
  • initial-value 將屬性的初始值設為 100vw 和 100vh,即視口的寬度和高度。

移除單位

現在,我們已經獲得了螢幕的寬度和高度值,但它們仍然包含單位。我們如何去除單位以獲得純數值?這是一個數學問題,所以我們需要使用 CSS 中的數學工具:atan2(y, x) 和 tan()。

  • atan2(y, x) 函數傳回從 x 軸到點 (x, y) 的角度(以弧度為單位)。
  • 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 內容。

  • counter-reset 初始化計數器 h 和 w 並將其值設為 var(--h) 和 var(--w)。
  • 內容:計數器(w)“x”計數器(h);顯示寬度和高度計數器,格式為“寬度 x 高度”。

完畢!

現在您已經純粹在CSS中實現了螢幕尺寸指示器。

瀏覽器會即時更新--w和--h並顯示在頁面上。整個過程完全不需要 JavaScript。

您可以點擊此處嘗試線上示範。

Get Screen Size in Pure CSS

以上是使用純 CSS 取得螢幕尺寸的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!