Pure CSS で画面サイズを取得する

CSS が Web 開発の最も困難な部分であったことは誰もが知っています。しかし、今日ではさらに難しくなってきています。

信じられないかもしれませんが、CSS でプロパティを定義し、計算を行い、さらには画面サイズを直接取得できるようになりました。この記事ではその方法を説明します。

プロパティの定義

@property ルールは、開発者がカスタム プロパティを作成し、その型、継承、初期値を設定できるようにする CSS の新機能です。この機能を使用すると、特定の値を読み取り、カスタム プロパティに渡すことができます。

以下の例では、画面の幅と高さをそれぞれ表す 2 つのカスタム プロパティ --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 は、プロパティを継承できることを示します。
• 初期値は、プロパティの初期値を、ビューポートの幅と高さである 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);
}

本文に ::before 疑似要素を作成して、CSS コンテンツを表示します。

• counter-reset はカウンター h と w を初期化し、それらの値を var(--h) と var(--w) に設定します。
• 内容: カウンタ(w) "x" カウンタ(h);幅と高さのカウンターを「幅 x 高さ」の形式で表示します。

終わり！

これで、純粋に CSS で画面サイズ インジケーターが実装されました。

ブラウザは --w と --h をリアルタイムで更新し、ページに表示します。プロセス全体は完全に JavaScript を使用しません。

ここをクリックしてオンライン デモを試すことができます。

以上がPure CSS で画面サイズを取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。